响应式web中的表格处理

2015-04-28阅读(9931)评论(0)牵着狗狗看MM

苏州实时公交查询

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

一:隐藏不重要数据列

处理前:
responsive-table1

处理后:
responsive-table2

实现方法:

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

Demo

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

二:固定首列,剩余列横向滚动

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

Demo

三:多列横向变2列纵向

处理前:
responsive-table3

处理后:
responsive-table4
实现方法:
<thead>定位隐藏,<td>变块元素,并绑定对应<th>列名,然后用伪元素的content:attr(data-th)实现<th>
responsive-table5

Demo

插件推荐:

Responsive tables
如果你是用的 Bootstrap 3,那么推荐用Responsive tables
Demo:http://gergeo.se/RWD-Table-Patterns/#demo

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

赞(0)
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 响应式web中的表格处理
分享到: 更多 (0)