没有单一的解决方案<表格>适当响应。这就是我喜欢这篇文章的原因李大为：它承认这一点，然后提出一些解决方案。这是对领土的一大补充我们一直在努力有一段时间。
目录和比较表
网站上有许多类型的表格，其中的内容可能与用于使其作出响应的方法有很大差异。我发现最令人沮丧的是比较表或普通的内容布局表，实际上没有基于CSS的全面解决方案来使这些类型的表具有响应性。
我开始寻找一个灵活而简单的解决方案，它可以作为可重用的web组件工作，而不考虑其中的内容。
比较表示例
表标记仍然适用于我们吗？
标准表标记似乎具有语义意义，并且在对齐单元格方面做得很好。我的主要担忧之一是无障碍。当然，本机表标记可以帮助屏幕阅读器的用户理解应该读入和导航内容的顺序吗？
我用一个简单的最佳实践表。使用一些屏幕阅读器(Chrome Vox浏览器和VoiceOver（语音覆盖）)，我尝试导航标记：
- ChromeVox告诉您您在一个表上，而VoiceOver还告诉您表中有多少列和行（这很有用）。
- 当你在表格标题上时，CromeVox或VoiceOver都不会告诉你。
<头部>，<th>甚至scope=“行|列”似乎什么都没做！使其识别标题的唯一方法是将其包装在<小时#>标签。
- 无论您的内容是如何安排的，读者都会逐行浏览表格。VoiceOver至少允许您使用箭头键导航到任何方向，但您仍然无法指示您的顺序应该导航进入。
本质上，标记中没有任何内容告诉屏幕阅读器用户应该通过行还是列读取内容。最有意义的标记仍然来自非模糊语义内容。
响应表的方法
让我们想想桌子的不同方式能够做出反应：
- 壁球：如果列的内容很少，它们可能会在移动屏幕上水平挤压而不会出现问题，因此不更改布局必须是有效选项。
- 垂直滚动条：如果布局和内容准确且关键，用户可以向左或向右滚动。这在带有
溢出=“自动”包装器。
- 按行折叠：在小屏幕上将每行拆分为自己的单列迷你表。切换
显示：表格进入之内显示：块正常的表标记将导致这种情况。
- 按列折叠：这是事情变得棘手的地方。纯CSS中的普通表标记无法做到这一点，因为代码顺序是按行和
<tr>包装器将其锁定。我们要么必须更改标记，要么开始使用JavaScript进行操作。
这四种可能性的直观示例。
不推荐构建响应表的方法
通过试验，我放弃了这些方法：
- 通过JavaScript生成第二个更窄的表，并通过断点交替隐藏/显示。
为什么？内容复制，不比“.m”网站好。将中断表内的所有唯一ID。对Styleguide驱动的组件的想法不佳。
- 在断点处使用普通的表标记和JavaScript将表重新排列为响应版本。
为什么？垂直表和水平表需要不同的标记。将破坏表内容的任何JS初始化。需要大量JS事件侦听器和DOM操作。
- 保留表标记但切换到
显示：柔性用于垂直对齐的表内容。
为什么？无法跨行对齐单元格<tr>类型包装和显示：表格居中覆盖柔性杆.
带flexbox的响应表
1a）对于面向行的表…
- 按照手机或屏幕阅读器应该如何读取标记的确切顺序，使用语义标头和内容。
- 放弃所有“行”包装器的概念。
- 根据列数或行数将每个单元格的宽度设置为百分比。
无法自动调整列宽大小。
查看钢笔响应表（按行）由CSS-Tricks提供(@css技巧)上的代码笔.
1b）对于面向列的表格…
- 设置柔性
秩序按行立即创建垂直表格。这必须是内联的，否则我们需要为每一行提供一个唯一的类。手动操作相当容易，或者很容易应用CMS或JavaScript。
查看钢笔响应表（按列）通过CSS技巧(@css技巧)上的代码笔.
2） 风格有助于建立联系
- 以所需的任何模式单独设置单元格的样式。
- 修复具有负边距的单元格边框重复。
查看钢笔响应表（单元格样式）作者：Davide Rizzo(@达维德尔里佐)上的代码笔.
3） 在小屏幕上折叠成块
在小屏幕媒体查询中，将所有内容设置为显示：块。这为我们提供了响应表！
查看钢笔响应表（折叠）由CSS-Tricks提供(@css技巧)上的代码笔.
3b）折叠成标签或手风琴
- Tab和accordion标记位于表内的逻辑位置
- 根据单元格切换行或列
秩序
- 使用
显示：无为视觉用户和屏幕阅读器切换
查看钢笔响应表（标签和手风琴）由CSS-Tricks提供(@css技巧)上的代码笔.
其他增强功能
对齐单元格内容
添加列边距通过偏移单元格宽度
斑马条纹桌子
模仿柱跨使用手动单元格宽度。
限制：无法在弹性表上执行行跨。
您可以对其他类型的标记使用相同的单元格样式
甚至是标准的表标记！
查看钢笔响应表（备用标记）由CSS-Tricks提供(@css技巧)上的代码笔.
无柔性接线盒的回退
IE9及以下版本不支持flexbox。对于较旧的浏览器，您可以检测flexbox（使用现代化者)并显示移动版本，这是一个很好的示例优雅退化.
.no-flexbox。R表>。表细胞{显示：块；}
结论
总的来说，这种方法提供了很大的灵活性，您可以考虑用这些技术替换所有的内容表。您可以继续轻松地在CSS中添加不同的主题和样式，如果设计者预先了解响应表的功能，那么他们将更加有效。
其他响应表资源
这个帖子是最初在CodePen上发布.
