动态更改 html 表格以在移动设备上显示答案

【问题标题】：dynamically alter html tables to display on mobile动态更改 html 表格以在移动设备上显示
【发布时间】：2012-04-18 14:36:28
【问题描述】：

我正在创建一个移动优化网站，该网站通过识别来自移动设备的请求动态创建，使用 php 和 html 解析器 QueryPath 操作现有页面以进行移动优化。我计划操作的一些页面包含 html 表格，例如 this one，这些表格在移动设备上显示效果不佳。

我正在寻找一个函数，它可以处理任何行和列的任何 html 表并对其进行操作，以便它在移动设备上以良好的格式显示。我正在使用 jquery 移动框架。

在 php 或 javascript/jquery 中的解决方案会很棒。

这是我的意思的 jsFiddle：Link

【问题讨论】：

您可以对表格进行响应式编码。
@ChristopherMarshall 对此表示感谢。我将更多地研究响应式表格。我没有能力创建或编辑原始表，我只能操作现有的表。我觉得这可能会导致创建标记来处理任何表格时出现问题
只是通过css。如果您可以访问这些样式，那么您应该很负责地为您的移动设备编写代码：}
您可以将表格包装在一个容器中，用户可以平移以查看整个内容。要获得良好的跨设备支持，您必须使用像 iScroll 4 这样的 JS 滚动脚本。

【解决方案1】：

我使用了 Filament 的这种响应式表格方法 - responsive tables, demo 并将其变成一个名为 tableview 的 Jquery Mobile “扩展” - 请参阅 here。

要使用它，您只需在 HTML 标记中指定最重要、更重要、最不重要的列，并添加相应的 JQM 触发器，其余的由扩展处理。根据屏幕大小，显示优先列，而隐藏其他列。

我将“显示”按钮和菜单从原始示例更改为 JQM 自定义选择，您可以根据需要切换列，添加过滤器（与 JQM 列表视图相同），可排序标题（仅嵌入按钮，没有功能），动态复选框，突出显示和其他一些东西。

扩展未完成，不包含任何逻辑（排序、分页等），过滤器除外。

我还在开发datatables.net 版本的tableview。如果您需要一个工作示例，请告诉我。或多或少也完成了。

【讨论】：