如何将表格格式化为移动友好的东西？

Question

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

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

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

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

Answer 1

实际上，你会用 css 打破桌子，但你可以尝试这样的事情：

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

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