响应表：如果表太小，则将单元格移动到新行答案

【问题标题】：Responsive table: move cell to new line if table too small响应表：如果表太小，则将单元格移动到新行
【发布时间】：2015-05-20 07:22:28
【问题描述】：

我的情况是我需要使用table，但我也希望它响应式。

对于某些点under max-width: 500px，我想将我的第三个<td> 元素转换为带有100% width 的第二行和其他带有50% width 的元素。

我知道使用<td> 上的display: block，我可以将它们放在彼此下方，我最终会这样做。但我想要这一步。

table {
    height: 400px;
    width: 100%;
}
table tr td:nth-child(1) {
    background-color: red;
}
table tr td:nth-child(2) {
    background-color: green;
}
table tr td:nth-child(3) {
    background-color: blue;
}
@media screen and (max-width: 500px) {
    table tr td:nth-child(3) {
        background-color: pink;
        clear: both;
        display: block;
        width: 100%;
    }
    table tr td:nth-child(1), table tr td:nth-child(2) {
        display: block;
        width: 50%;
    }
}

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

(Fiddle version)

我已经尝试过不同的display 变体，例如inline-block。这是可能吗？最好没有JS？

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

如果您处理单元格周围的空白以使两个 50% 宽的元素适合：

table {
    ...
    border-spacing: collapse;
}
td {
    padding: 0;
}

Demo

请注意，我已从您的第三个单元格中删除了一些不必要的样式。

【讨论】：