使用CSS使表格具有响应性的方法

让表格在移动端显示漂亮的实用方法

几天前，我收到谷歌搜索控制台的一个警告。它在我有一个大表格的页面上检测到一个移动可用性问题。

这就是那个给我带来问题的表格。

在手机上，它的呈现效果很差。

这不是一个好的用户体验，而且在谷歌搜索控制台中出现了错误。如果有什么东西，我不希望是一个错误/警告在那个地方。当它是我可以解决的问题时，就不会出现。

雨果，我使用的静态网站生成器，让我为单个页面注入特定的CSS，只需在markdown文件中添加一个<style> 标签。很方便。

所以我开始寻找一个好的方法来使我的表格响应。我在CSS Tricks上看到了这篇非常好的文章。响应式数据表格。这篇文章是2011年写的，现在仍然很好用。

技巧是这样的：我们想让表格显示为一个块状元素，而不是传统CSS意义上的表格。 我们通过将所有的表格标题移出视图来隐藏它们，然后在表格中插入一个新的块，每一行都会有自己的一组标题，像这样。

下面是实现上述设计的代码。

@media
only screen and (max-width: 1500px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr { border: 1px solid #ccc; }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 200px;
    margin-left: 150px;
  }
  td:before {
    position: absolute;
    top: 12px;
    left: 6px;
    width: 200px;
    padding-right: 40px;
    white-space: nowrap;
    margin-left: -150px;
  }
  td:nth-of-type(1):before { content: "Option"; }
  td:nth-of-type(2):before { content: "Description"; }
  td:nth-of-type(3):before { content: "Type"; }
  td:nth-of-type(4):before { content: "Default";}
}

为了使你自己的表格有反应，你要定制的重要东西是最后4行--你需要输入每个 "列 "的标题，如果你有更多的列，你需要增加。如果你有更多的列，你需要增加，或者如果你有更少的列，你需要删除它们。

另一件事是新的 "标题 "将为每一行占用的空间。我添加了一个150px 的空白，你需要引用它2次：一次是作为margin-left: 150px ，在td ，另一次是作为margin-left: -150px ，在td: before 。

最后，你需要决定这个新的布局何时开始生效。我让它在页面小于1500px时启动，因为那个表格很大。我也可以把它作为默认行为，而不是在巨大的屏幕上显示正常的表格，但到目前为止，我认为问题已经解决了。

我希望这有帮助。