jquery - 如何在移动设备上处理宽表

Question

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

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

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

谢谢。

score 5 · Accepted Answer

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

score 4 · Accepted Answer

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

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

只是我的2美分...

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

如何将容器 css 设置为

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

和桌子更宽

#table {
    width: 150vw;
}

所以你可以滚动浏览

5 回答 5