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

Question

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

我想知道是否有人对如何处理这些表格和设置其格式有任何建议，以便它们在移动屏幕上很好地显示而无需滚动条？ 就像协调列表或一系列div一样。 有任何想法吗？

我使用jQuery mobile作为我的框架和PHP代码。

我能想到的当前唯一的“修复”是将表包装在width:100%且overflow-x:auto的<div> 。

Answer 1

实际上，您可能会用CSS打破表，但是您可以尝试执行以下操作：

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

这将使事情的表现更像一堆div，而不是表的行和单元格。 对于实际的表格数据，我真的不建议这样做。 但是对于画廊和布局，您应该可以。