Css 包裹两个相邻的td'；s

我有一张有两列的桌子，两列都是300像素宽，在普通电脑屏幕上的宽度是600像素

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

---

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

表格与任何其他HTML元素一样。如果不喜欢其显示方式，请更改其显示属性

table, tbody, tr, th, td { display: block }
thead { display: none } /* optional */

---

重新格式化复杂表格的演示：

这是一个概念验证演示

考虑下表：

<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>

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

使用float的一个优点是，表是响应的，而不使用媒体查询，这在某些情况下可能很有用

---

Fiddle:

您需要使用

媒体查询来根据屏幕大小或浏览器宽度更改CSS属性

要在纵向模式下瞄准iPhone 5，您可以执行以下操作：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
    td {
        width: 100%;
        display: block;
    }
}

要针对更通用的设备阵列，您可以使用更通用的查询来捕获更多屏幕大小：

@media only screen 
and (max-width : 800px)  {
    td {
        width: 100%;
        display: block;
    }
}

（调整浏览器窗口的大小）

对于iPhone/iPad相关的媒体查询，有一个很好的资源
你真的在使用
…
标记吗？你的桌子上有多少行？你能发布你的HTML吗？谷歌媒体查询你可能可以用div来实现这一点，表格真的应该只用于表格数据。事实上，表格数据是表格数据。通过媒体查询定位特定设备是一种非常糟糕的方式。（请参阅：和）除了这不适用于IE9和更高版本，尽管这可能与此处无关。媒体查询在IE8和更高版本中不起作用，但在IE9中肯定有效。谢谢，@肉桂，我需要知道这一点。从长远来看，这肯定是最有帮助的。问题中给出的代码在IE9及更旧版本上不起作用。这些版本都有内置的表格格式化例程，所以在表格相关元素上设置
display
是无效的。谢谢，@Jukka。我问这个问题是为了能够为小屏幕设备编写CSS。据我所知，他们没有IE9。我非常感谢你指出这一点，它在更大的背景下非常有用（双关语）。为什么
min device width:320px
？因为iPhone 5屏幕的最小宽度（即在纵向模式下）将是320px。这样可以确保您只针对iPhone 5或尺寸完全相同的设备。如果您想要更一般的查询，您可以省略最小设备宽度和方向，而只使用最大设备宽度谢谢！我刚刚习惯了媒体的提问，所以你的评论很有启发性。我看不出这里的逻辑。您将表的重新格式化限制在宽度大于等于320px且处于纵向模式的设备上，因此任何小于此值或处于横向模式的设备都将获得正常的表格式？@cimmanon I正在演示如何针对特定设备。下面有一个更一般的例子。
@media only screen 
and (max-width : 800px)  {
    td {
        width: 100%;
        display: block;
    }
}