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

Posted 2023-05-09

技术标签:

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

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

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

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

谢谢。

【问题讨论】：

【参考方案1】：

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

示例：Examdoctor - Buy Now page

【讨论】：

好建议。但我认为对于我的特定设置，我可能不得不尝试 beta jquery 移动选项。感谢您的 cmets。 @97ldave +1 我建立了那个例子 ;)【参考方案2】：

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

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

只要我的 2 美分...

【讨论】：

好建议。不幸的是，对于我的设置，我认为这行不通。但我有一个想法，我还能在哪里使用这样的东西。谢谢指点。【参考方案3】：

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

http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/index.html

这是一个例子：http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-reflow.html

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

【讨论】：

这真是太酷了。我要玩这个。不错。【参考方案4】：

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

http://css-tricks.com/responsive-data-tables/

【讨论】：

这似乎与 jquery 移动选项jquerymobile.com/demos/1.3.0-beta.1/docs/tables/… 非常相似。好东西。谢谢。爱它，*** jquerymobile。这个更好。【参考方案5】：

如何将容器 css 设置为

#container
    width: 100vw;
    overflow: scroll;

桌子更宽

#table 
    width: 150vw;

所以你可以滚动浏览

【讨论】：