如何将表格格式化为适合移动设备的格式？

Question

我正在开发我的第一个网站移动版本。我有 1000 篇文章，其中包含 HTML 表格。不幸的是，它们具有固定宽度，并且在某些情况下用于布局内容（主要是照片库）。

我想知道是否有人对如何浏览和格式化这些表格有任何建议，以便它们可以在移动屏幕上很好地显示而无需滚动条？就像与一个列表或一系列 div 进行协奏一样。有什么想法吗？

我使用 jQuery mobile 作为框架并使用 PHP 编写代码。

目前我能想到的唯一“修复”是将表格包装在带有 width:100% 和 overflow-x:auto 的

中>。

Answer 1

实际上，你会用 css 破坏表格，但你可以尝试这样的事情：

table{
  width: 100%;
}
tr{
  display: block;
}
td{
  float: left;
  width: 24%
}

这将使事情更像一堆 div，而不是表格行和单元格。
对于实际的表格数据，我真的不推荐这样做。但对于画廊和布局来说应该没问题。