响应式数据表格汇总

自从我 第一次发表关于响应式数据表格的文章 以来，已经出现了很多关于此主题的讨论。

最初的想法是放弃表格的网格布局，并将每个单元格都做成一行。 每一行都用伪元素进行标记。 这会创建一个更高的表格，需要更多的垂直滚动，但不需要水平滚动。 在不丢失上下文的情况下浏览数据更容易。 缺点是您可能会丢失数据比较的上下文，因为您不再能够看到同一类型数据的单元格并排显示。

Mobifreaks 发布了一个 非常相似的方法，它使用了相同的布局更改和伪元素标记。 他们使用 HTML5 data-* 属性进行标记，从而无需为不同的表格编写自定义 CSS。 我不认同 SEO 部分，但代码很好。

Derek Pennycuff 借鉴了最初的想法，并 应用了“移动优先”的概念。 它不是从表格标记开始，而是从定义列表标记开始，然后在屏幕足够大时将其强制转换为表格布局。 虽然我喜欢这里的思路，但我并不确定我喜欢实现它的方式。 标记更重，而且（具有讽刺意味的是）我认为它不是语义化的。 表格数据应该用表格标记。 我认为“移动优先”背后的理念是默认情况下保持简单和轻量，而对于更大的屏幕则使用更重和更复杂的方式。 这个演示一开始就比较重，并且一直都很重。

Drew Dyksterhouse 制作了一个演示，它通过测量表格是否比屏幕宽来计算表格应该在哪里断开，然后保存该断点以提高效率。

---

Scott Jehl 想出了两个巧妙的想法。 一个是从表格中的数据构建图表。 在此演示中，它是一个饼图，比完整的数据表格窄得多，因此更适合小屏幕。

很酷，但显然不是所有表格都能转换为图表。 我还会争辩说数据表格和图表是截然不同的东西。 如果您要费心制作图表，最好也将其显示在更大的屏幕上，因为它以一种有用的替代方式提供了上下文。 或者至少提供一个查看它的选项。

Scott 的另一个想法侧重于大型数据表格可能会将父容器的宽度扩展到小屏幕无法显示的范围。 因此，为了防止这种情况，可以使用媒体查询在小屏幕上隐藏表格，并用一个小型模拟表格和一个查看完整表格的链接来替换它。

---

Stewart Curry 想出了 仅隐藏不太重要的列 的想法，以适应较小的屏幕。 人们早期对移动特定网站的抱怨之一是，仅仅因为他们使用的是移动设备，并不意味着他们应该获得比使用更大屏幕的用户更差的体验（尤其是在这些设备完全能够处理“完整”网站的情况下）。

我认为 Stewart 的想法很有道理。 使用小屏幕将信息集中到最重要的内容上是很棒的，只是不应该在没有补救措施的情况下隐藏信息。 Filament Group 的 Maggie Costello Wachs 也提出了 在较小的屏幕上隐藏不必要的列 的想法，但也提供了一个下拉菜单，您可以在其中重新启用它们（您可以通过水平滚动查看它们）。

David Bushell 也解决了不更改基本表格格式但仍然解决“太宽”问题的方法。 他的概念 将表格翻转到侧面 并将 overflow-x: auto 应用于 tbody，这意味着如果数据单元格超出小屏幕，则可以左右滚动，但您始终可以看到标题（就像它们是固定位置一样）。

Brad Czerniak 有一个他称为 Rainbow Tables 的想法，在较小的屏幕上，表格的网格结构被放弃，数据单元格被尽可能地挤在一起，同时仍然保持“行”的结构。 然后，数据不是通过它所在的列来识别，而是通过颜色编码来匹配键。

2012年5月26日更新：Zurb 已 发布了一种新技术。 它专注于使最左侧的列成为“键”列。 在宽屏上，它只是一个普通的列。 在小屏幕上，它会固定/粘贴到左侧，其余列可以滚动。 这允许进行行与行之间的比较。

它类似于 David Bushell 的固定左侧列技术，但可能更健壮一些，因为它利用 JavaScript 进行了一些 DOM 操作和屏幕尺寸测量。 额外的依赖项、更深层次的支持，由您决定。

更新

以下是一些新出现的方法

• Filament Group 将一些最佳模式组合到一个名为 Tablesaw 的“一组响应式表格插件”中。
• Stackable.js
• FooTable
• jQuery-rt-Responsive-Tables
• RWD-Table-Patterns

此外，Jason Grigsby 还撰写了一篇关于 选择解决方案 的文章，该文章基于用户希望对表格执行的操作。

为了使这个问题更难，请考虑您必须从什么标记开始才能使数据在没有任何 CSS 甚至 JavaScript 的情况下工作。 这样一来，它就可以发送到电子邮件和 RSS 等地方，并且可以正常工作。 我尝试在这里解决这个问题。 它很乱，但它有效。