包裹两个相邻的 td

我有一个有两列的表格，两列都是 300 像素宽，在普通计算机屏幕上宽度为 600 像素。

我想修改小屏幕移动设备该表格的显示。

有没有一种 CSS 方法可以使右列的单元格换行并位于左列的单元格下方，然后是下一个左侧单元格，然后是下一个右侧单元格，依此类推？

这是一个概念验证演示。

考虑下表：

<table>
    <tr>
        <td>First Row - Cell 1</td>
        <td>First Row - Cell 2</td>
    </tr>
    <tr>
        <td>Second Row - Cell 1</td>
        <td>Second Row - Cell 2</td>
    </tr>
</table>

如果使表格单元格浮动，则可以使它们垂直堆叠，例如：

table {
    width: auto;
}
table td {
    background-color: lightgray;
    float: left;
    width: 150px;
    margin: 10px 0;
}

您需要调整媒体查询中的表格宽度和单元格宽度。

使用浮动的优点之一是表无需使用媒体查询即可响应，这在某些情况下可能很有用。

Fiddle: http://jsfiddle.net/audetwebdesign/qSd7g/ http://jsfiddle.net/audetwebdesign/qSd7g/