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

Question

我现在处于这样一种情况，必须使用一个表格，但同时也想要它是响应式的。

对于一些在 max-width: 500px 的点，我想把第三个 <td> 元素移到第二行并设置为 100% 宽度，其他元素则设置为每个 50% 宽度。

我知道通过在 <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 版本）

我已经尝试了不同的 display 属性，例如 inline-block。这是否有可能实现？最好不要使用 JS。

- Paul van den Dool

Answer 1

如果您处理单元格周围的空白以使两个50％宽度的元素适合，则inline-block可以使用：

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

演示

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

- isherwood