- 相关推荐
响应式web中的表格处理
在显示复杂的表格数据的时候,相信 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;} }
Demo
以用户角度思考,每个人对数据的认知不同,或许你隐藏的数据对于他却是很重要的。所以这种方法不推荐。
二:固定首列,剩余列横向滚动
处理前:
处理后:
实现方法:将横向的表头利用 CSS 改为纵向显示并固定位置,其余内容部分不变并出现横向滚动条。tbody 上应用 white-space:nowrap; tbody tr 下应用 display:inline-block;
Demo
三:多列横向变2列纵向
处理前:
处理后:
实现方法:
定位隐藏,
变块元素,并绑定对应 | 列名,然后用伪元素的content:attr(data-th)实现 |
---|
Demo
插件推荐:
Responsive tables
如果你是用的 Bootstrap 3,那么推荐用Responsive tables
Demo
tablesaw
个人觉得这款插件功能很强大,满足各种需求
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 响应式web中的表格处理
【响应式web中的表格处理】相关文章:
Oracle数据库无响应故障处理方式12-05
EXCEL表格中数据透视表怎么用05-24
web项目总结11-22
在excel单元格中画表格的方法01-04
网页制作中PS图像处理的应用07-16
web前端实习报告10-18
web实训报告12-18
web实训报告12-16
PS在网页制作中图像处理的应用07-16