css - HTML 中的可拆分表格行

Question

有没有办法让表格的行在某个单元格处可断开？

<table>
<tr>
<td>Some title descriptive text</td>
<td>nnumbers</td><td>Short text</td><td>datetime</td>
<tr>
... more rows
</table>

现在，如果视口(viewport)的宽度太小(通常在手机上使用时)，我希望这一行在第一个单元格之后中断。

无论如何使用 html5 css3 和最终的一些 Javascript 是否可以实现？

Answer 1

从 CSS2.1 开始，可以通过使用适当的 display CSS 属性值来实现。请参阅此演示页面:

http://dabblet.com/result/gist/1576044

...和来源:

http://dabblet.com/gist/1576044

在 Galaxy Nexus 手机上测试过，有效，并且应该适用于大多数基于 Webkit 的移动浏览器。此外，它应该适用于 Firefox Mobile 和 Opera，尽管我没有测试。

长话短说，使用媒体查询检测页面宽度并设置max-width断点并应用:

CSS 表，tbody，thead，tr，td，th {显示: block }