使用最少 CSS 使表格响应式

以下是 Bradley Taunt 的一个很棒的 CSS 技巧，他展示了如何使用一点点额外的代码让表格在移动设备上正常工作。 他将每个表格行样式化为一个卡片，看起来像这样

查看 CodePen
响应式表格 #2.5：Flexbox 由 Bradley Taunt (@bradleytaunt)
在 CodePen 上。

（确保抓取 CodePen 并将其缩小一点，以查看设计如何响应式地工作。）

Bradley 的示例标记看起来像这样 - 干净、可访问、普通的 HTML

<table>
  <thead>
    <tr>
      <th>Type of Food</th>
      <th>Calories</th>
      <th>Tasty Factor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>Type of Food</span> Slice of Pizza</td>
      <td><span>Calories</span> 450</td>
      <td><span>Tasty Factor</span> 95%</td>
    </tr>
  </tbody>
</table>

他如何实现这种卡片效果？ 他在较小的屏幕上使用 Flexbox 并设置 span 元素使其显示出来。

但是！ 我不太喜欢这些跨度。 它们在较大的屏幕尺寸上隐藏，但标记仍然存在，所以我觉得它不太干净。 我前一段时间正在做一个项目，我们遇到了同样的问题。 我们决定在每个 td 上使用数据属性，如下所示

<table>
  <thead>
    <tr>
      <th>Type of Food</th>
      <th>Calories</th>
      <th>Tasty Factor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="Type of Food">Slice of Pizza</td>
      <td data-title="Calories">450</td>
      <td data-title="Tasty Factor">95%</td>
    </tr>
  </tbody>
</table>

然后我们可以在样式中获取该数据属性并在页面上的伪元素中渲染它

td:before {
  content: attr(data-title);
}

从那里，我们绝对定位伪元素到侧面，并且只在使用媒体查询的较小屏幕上显示它。 我不确定这样做对可访问性的影响，但在我看来，它更容易阅读和理解。

无论哪种方式，我认为这篇文章很好地提醒了我们，一旦开始使用表格，就会出现所有棘手的问题。 有很多方法可以以响应式的方式处理事物，而这些决定应该完全基于设计的上下文。

响应式表格…

当您需要上下比较数据列时，最好大体上保留表格结构，并允许滚动。

如果每一行可以拆开并仍然有用，那么折叠它们以避免滚动会很好。https://#/zeMFdrwU1M pic.twitter.com/3z8hQDvNAZ

— CSS-Tricks (@css) 2019 年 10 月 11 日

直接链接 →