响应式web中的表格处理我是这样弄的 - 技术文章

作为切图网 qietu.com 的一名web前端工程师，我在为客户合作的项目做响应式开发的时候，通过css3 media query多媒体查询技术进行一些重新的排版，可以很轻松完成网站的响应式，也会碰到一些小麻烦，其中典型的例子就是table表格的响应式开发了。

相信 Web 开发人员都碰到过显示不全的情况，我是这么解决的，希望能帮到你。

一：隐藏不重要数据列

处理前：

处理后：

实现方法：

@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 改为纵向显示并固定位置，其余内容部分不变并出现横向滚动条。tbody 上应用 white-space:nowrap; tbody tr 下应用 display:inline-block;

三：多列横向变2列纵向

处理前：

处理后：

实现方法：

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

插件推荐：

Responsive tables

如果你是用的 Bootstrap 3,那么推荐用Responsive tables

Demo:http://gergeo.se/RWD-Table-Patterns/#demo

tablesaw

个人觉得这款插件功能很强大，满足各种需求

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com