如何在移动设备上处理宽表答案

【问题标题】：How to handle wide tables on mobile devices如何在移动设备上处理宽表
【发布时间】：2013-01-11 16:23:48
【问题描述】：

这里有一个一般性问题。只是想知道是否有在移动设备上显示宽表（即很多列）的巧妙方法。

稍微解释一下，我们创建的移动网站使用 ajax 从主网站加载其内容，在某些情况下，这些页面包含包含大量列的表。将整个表格放在垂直放置的移动设备上的唯一方法是缩小字体大小，直到无法阅读。

只是想知道是否还有其他选择。

谢谢。

【问题讨论】：

【解决方案1】：

您可以为每一行使用一个“小部件”，而不是使用表格来显示您的数据。这使得为移动设备进行设计和以响应式方式进行数据流动变得更加容易。

【讨论】：

【解决方案2】：

我以前也遇到过这个问题...而且很痛苦，因为您没有足够的空间来显示整个数据。

我当时的计算方法是使用可折叠项目列表。您创建一个列表，其中仅包含每行最重要的数据，如果用户想了解有关该行的更多信息，他可以单击该行并将其展开，显示所有详细信息。

只要我的 2 美分...

【讨论】：

【解决方案3】：

如果你愿意冒险，jQuery Mobile 的 beta 版本（如果这个问题与它相关）有一个新的响应式表格实现：

基本上，如果屏幕宽度变窄，它会改变它的大小以适应宽度的变化。您可以以这样的方式使用它，如果宽度太小，某些预定义的列将隐藏。目前这是 jQuery Mobile 框架上响应式表格的最佳解决方案。

【讨论】：

【解决方案4】：

不久前发现了这种技术并将其标记为将来使用，但从未发现需要做类似的事情，所以我没有玩过，但这是一个好主意：

【讨论】：

【解决方案5】：

如何将容器 css 设置为

#container{
    width: 100vw;
    overflow: scroll;
}

桌子更宽

#table {
    width: 150vw;
}

所以你可以滚动浏览

【讨论】：