设计不足的响应式表格 | CSS-Tricks

我第一次在 2011 年写了关于响应式数据表格的文章。当响应式网页设计刚开始流行时，数据表格这类小问题就需要克服。 <table> 元素的本质是，它们根据所包含内容的最小宽度，而这个宽度很容易超过小型屏幕设备的宽度。

我当时制作的这张图片很好地说明了这个问题

但是…… 也许它们并没有那么糟糕。如果左侧的图片是可滚动的，那么也许它并没有那么糟糕。事实上，这正是我最近在 CSS-Tricks 上所做的。我认为，当您不知道表格包含什么内容时，这是处理响应式表格最安全的方式。这里的情况就是这样，我需要设置应用于所有博客文章的基本表格样式，这些文章可能包含表格。

可滚动表格的核心思想是将其包裹在一个 <div> 中，该 <div> 设置了 overflow: auto;。这样，里面的 <table> 就可以超过父元素的宽度，但不会“撑破宽度”，而是会触发滚动条。不过，这还不够，所以这是 Adrian Roselli 的真实想法。包裹的 <div> 需要是可聚焦的，并且要有标签，因此

<div role="region" aria-labelledby="Caption01" tabindex="0">
  <table>
    <caption id="Caption01">Appropriate caption</caption>
    <!-- ...  -->
  </table>
</div>

然后在您完成所有其他操作的情况下，应用滚动和聚焦样式

[role="region"][aria-labelledby][tabindex] {
  overflow: auto;
}

[role="region"][aria-labelledby][tabindex]:focus {
  outline: .1em solid rgba(0,0,0,.1);
}

如果您要进一步设计响应式表格，有各种各样的选项。一种经典的方法是对许多元素使用 display: block，这意味着同一行中的所有数据 (<tr>) 最终会堆叠在一起，形成一段内容，不太可能破坏父元素的宽度。您可以使用伪元素正确地获得所有数据标签。但是，这种方法只有在单独的每一行内容都能完全理解的情况下才有意义。并非所有表格都是这种情况。表格的目的可能是交叉引用数据，在这种情况下，您使用这种方法就破坏了这种目的。所以，再次强调，当您知道表格的确切内容和用途时，响应式表格有很好的方法。但是，当您 *不知道* 时，最好的响应式解决方案是确保它们可以滑动。

直接链接 →

Ryan Leadenham

# 2020 年 12 月 3 日

这是我大部分情况下喜欢的解决方案。我认为原始文章中的视觉提示是最重要的部分。当我之前实现这个功能时，我使用 JavaScript 来处理视觉提示…… 我想我需要使用这种纯 CSS 方法来更新它。

Sik

是的，这几乎与我在我的网站上所做的一样 (而且那里的表格必须保持表格形式)。只要只有表格本身滚动，而不是整个页面滚动，在实践中应该没问题。

最大的问题是，如果您的页面没有滑动，移动浏览器会不惜一切代价拒绝显示滚动条，这导致有人没有意识到表格可以滚动，因为一列边界正好与屏幕的边沿对齐。我一直在考虑在两侧添加箭头，只有当表格可以在该方向滚动时才显示，但到目前为止还没有找到只用 CSS 的方法 (到目前为止，每一次尝试似乎都因 *一个* 问题而失败)，虽然我考虑过使用 JavaScript 来显示箭头 (当然不是滚动本身)，但这恰逢 Google 考虑让移动版 Chrome 在 2G 连接时放弃 JavaScript 的时候…… 这本身并不算什么大事，但因为它会显示一个警告 (无法标记脚本为安全放弃？)，而且我不想冒着人们认为我在幕后做了阴暗事情的风险，因为没有办法立即知道发生了什么。

评论