html表格如何做成响应式,响应式web中的表格处理

在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况，下面给出几种响应式表格的解决方法：

一：隐藏不重要数据列

处理前：

处理后：

实现方法：

[css]@media only screen and (max-width: 800px) {

table td:nth-child(2),

table th:nth-child(2) {display: none;}

}

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

table td:nth-child(4),

table th:nth-child(4),

table td:nth-child(7),

table th:nth-child(7),

table td:nth-child(8),

th:nth-child(8){display: none;}

}

[/css]

以用户角度思考，每个人对数据的认知不同，或许你隐藏的数据对于他却是很重要的。所以这种方法不推荐。

二：固定首列，剩余列横向滚动

处理前：

处理后：

实现方法：将横向的表头利用 CSS 改为纵向显示并固定位置，其余内容部分不变并出现横向滚动条。tbody 上应用 white-space:nowrap; tbody tr 下应用 display:inline-block;

三：多列横向变2列纵向

处理前：

处理后：

实现方法：

定位隐藏，变块元素，并绑定对应列名，然后用伪元素的content:attr(data-th)实现

插件推荐：