这样的响应式表格难道你不需要吗

现在，越来越多的网站采用反应式设计，谷歌鼓励使用反应式网页设计。

使用响应式设计使得你可以只维护一份代码便可以实现在pc端、移动端完美展示。此外，响应式设计对网站的SEO也有利，避免网站权重分散。不过，如果网站用户有大部分还使用旧版本的IE浏览器的话，响应式就不太适合了。使用响应式设计因为需要在不同尺寸的屏幕显示隐藏不同元素以改变布局，因此会产生大量冗余的css代码。

对于div，图片等实现响应式是比较方便的，但对于表格，就比较需要技巧了。本文介绍下如何通过纯css实现舒适完美的table。

我们都知道，css有个::before伪元素，此元素下特有的content属性，且我们可以在html标签中设置自定义属性。假如我们有这样一个表格：

我们以600px来区分小屏幕与大屏幕，上图表格代码大概是这样的：

这里使用了自定义属性data-label来存储表头名称。接下来需要实现在移动端的响应式展示，添加如下css代码：

@media screen and (max-width: 600px) {

table {

border: 0;

}

table thead {

display: none;

}

table tr {

margin-bottom: 10px;

display: block;

}

table td {

display: block;

text-align: right;

}

table td:before {

content: attr(data-label);

float: left;

text-transform: uppercase;

}

}

通过使用@media媒体查询，::before伪元素及content来设置600px以下小屏幕的显示方式，content显示的内容为td的自定义属性data-label的值。效果如下图：

怎么样，是不是觉得很实用？简单几句css就搞定，不需要再使用js来设置。考虑使用响应式布局的同学可以参考下哦。