0

我使用标准的 HTML 表格显示了一些表格数据。我可以根据数据类型对单元格宽度进行一些预测,但不多(名称可能很长,描述可能只有一个词):

+--------------+--------------+-----+------+----------------------------------------------+
| name surname | name surname | num | date | one or two sentences making up a description |
+--------------+--------------+-----+------+----------------------------------------------+

现在,这些数据也应该可以在 Android 智能手机和其他小型设备上读取。问题是即使字体非常小,生成的表格也会比屏幕宽。您可以在此小提琴中看到问题:http: //jsfiddle.net/orithena/nbbaU/4/(如果需要,在宽屏幕上调整结果窗口的大小)。

如果表格向右溢出,我希望该行分成两行,而一个单元格跨越两行 - 如果一行流在一起,每一行都应该这样做(甚至是表标题行)。而且我想在这些“双行”之间有更宽的边框间距,以便用户有视觉提示将它们解释为“一行”:

+==============+======+======================+
| name surname | num  | one or two sentences |
+--------------+------+ making up a          |
| name surname | date | description          |
+==============+======+======================+

这是所需结果的模型,但它是丑陋的标记(帮助单元格,语义单元格顺序对于屏幕阅读器来说是混乱的) - 它是静态的,即必须在服务器端完成:http: //jsfiddle.net/orithena/ wwCYU/4/

有没有办法在不重新排序单元格或使用辅助单元格的情况下实现流动表格单元格?最好不要在每个表格单元格或 Javascript/jQuery 中使用 div?我认为媒体查询没问题,尽管它们并不能完全解决问题。

我什至没有在网上找到问题,但也许我只是使用了错误的关键字......(哦,它不必与 IE 兼容)。

4

0 回答 0