如何将表格格式设置为移动友好？

Question

我正在使用我的第一个移动版本的网站。我有1000个包含HTML表格的文章。不幸的是，他们有固定的宽度，并且在某些情况下（主要是照片画廊）已经用于布置内容。

我想知道是否有人对如何通过和格式化这些表格的建议，以便他们很好地显示在移动屏幕上，而不需要滚动条？就像一个名单或一系列的divs。有任何想法吗？

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

我能想到的目前唯一的'修复'是<div>与width:100%和overflow-x:auto包装表。

Answer 1

实际上，你会破表CSS，但你可以尝试这样的：

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

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