响应式web中的表格处理我是这样弄的
作为切图网 qietu.com 的一名web前端工程师，我在为客户合作的项目做响应式开发的时候，通过css3 media query多媒体查询技术进行一些重新的排版，可以很轻松完成网站的响应式，也会碰到一些小麻烦，其中典型的例子就是table表格的响应式开发了。
相信 Web 开发人员都碰到过显示不全的情况，我是这么解决的，希望能帮到你。
一：隐藏不重要数据列
处理前：
处理后：
实现方法：
01 02 03 04 05 06 07 08 09 10 11 12 13 | @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
