css 响应式_使用CSS使表响应

css 响应式

A few days ago I got a warning from the Google Search Console. It detected a Mobile Usability issue on a page where I have a big table.

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

This is the table that gave me the problem:

这是给我问题的表：

On mobile, it rendered pretty poorly:

在移动设备上，它的渲染效果很差：

Not a nice user experience, and an error in the Google Search Console. If there’s something I don’t want is an error/warning in that place. Not when it’s something I can fix.

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

Hugo, the static site generator I use, lets me inject CSS specific to a single page, simply by adding a <style> tag into the markdown file. Handy.

Hugo是我使用的静态网站生成器，通过简单地在markdown文件中添加<style>标记，我就可以注入特定于单个页面CSS。 便利。

So I started searching for a good way to make my table responsive. I came across this very nice article on CSS Tricks: Responsive Data Tables. It’s from 2011, and still works fine!

因此，我开始寻找一种使表具有响应能力的好方法。 我在CSS技巧： 响应式数据表上看到了一篇非常不错的文章。 从2011年开始，仍然可以正常使用！

The trick is this: we want to make the table display as a block element rather than as a table in the traditional CSS sense. We hide all the table headings by moving them out of the view, and we insert a new block in the table, and each row will have its own set of headings, like this:

诀窍是这样的：我们希望使表格显示为一个块元素，而不是传统CSS意义上的表格。 我们通过将所有表头移出视图来隐藏所有表头，然后在表中插入一个新块，每一行将具有自己的一组表头，如下所示：

Here is the code that achieves the above design:

这是实现上述设计的代码：

@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";}
}

The important things you’ll want to customize to make your own table responsive are the last 4 lines - you need to enter the title of each “column”, and you need to add more if you have more columns. Or remove them if you have less.

您需要自定义以使自己的表响应的重要事情是最后4行-您需要输入每个“列”的标题，并且如果您有更多的列，则需要添加更多。 或者，如果数量较少，请将其删除。

The other thing is the space that the new “headings” will take for each row. I added a 150px margin, and you need to reference it 2 times: one as a margin-left: 150px in the td, and as a margin-left: -150px in the td: before.

另一件事是新的“标题”将占据每一行的空间。 我添加了一个150px边距，您需要引用2次：一次是td margin-left: 150px ， margin-left: -150px是td: before margin-left: -150px td: before 。

Finally, you need to decide when this new layout kicks in. I made it active when the page is less than 1500px, because that table is huge. I could as well make this the default behavior rather than displaying the normal table on huge screens, but so far I think the problem is solved.

最后，您需要确定何时启动该新布局。当页面小于1500px时，我将其激活，因为该表很大。 我也可以将其设置为默认行为，而不是在大屏幕上显示普通表，但是到目前为止，我认为问题已解决。

I hope this helps.

我希望这有帮助。

翻译自: https://flaviocopes.com/css-responsive-table/

css 响应式