使用CSS使表响应

一种使表格在手机上漂亮显示的实用方法

几天前,我收到了警告Google Search Console。它在我有一张大桌子的页面上检测到移动可用性问题。

这是给我问题的表:

在移动设备上,它的渲染效果很差:

不好的用户体验,以及Google Search Console中的错误。如果有什么我不想要的地方就是一个错误/警告。当我可以解决的时候就不行了。

Hugo,我使用的静态网站生成器,只需添加一个<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时,我将其激活,因为该表很大。我也可以将其设置为默认行为,而不是在大屏幕上显示普通表,但是到目前为止,我认为问题已解决。

我希望这有帮助。

免费下载我的CSS手册


更多CSS教程: