响应表:如果表太小,则将单元格移动到新行

Question

我处于需要使用a的情况table,但我也希望它能够响应.

在某些方面under max-width: 500px,我想将我的第三个<td>元素转换为第二个元素100% width和其他元素50% width.

我知道,与display: block对<td>的,我可以把他们互相,这是我最终会做下面.但我希望介于两者之间.

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>

(小提琴版)

我已经尝试过不同的display变种inline-block.这是可能吗？最好没有JS？

Answer 1

如果您处理单元格周围的空白以使两个50%宽度的元素适合,则内联块可以工作:

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

演示

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