响应式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前端() - Web前端学习之路 响应式web中的表格处理
-
JavaScript经典效果集锦
些很实用且必用的小脚本代码:脚本1:进入主页以后自动播放声音脚本2:进入主页后自动最大话,省的去在自己单击了To(0,0)zeTo(lWidth,lHeight)脚本3:显示现在时间的脚本enow脚本4:显示最后修改时间的.脚本e(Modified)脚本5:设为首页,加为收藏,加入频道,启动outlook...
-
浅析JavaScript基本类型与引用类型
两种类型:ECMAScript变量包含两种不同类型的值:基本类型值、引用类型值;基本类型值:指的是保存在栈内存中的简单数据段;引用类型值:指的是那些保存在堆内存中的`对象,意思是,变量中保存的实际上只是一个指针,这个指针指向内存中的另一个位置,由该位置保存对象;两种访问方...
-
SQL语句类型的标准模式
1、查询语句:主要是由select关键字完成2、事务控制语句:主要由commit、rollback和savepoint三个关键字完成3、DML(数据操作语言)语句:主要由、update和三个关键字完成4、DDL(数据定义语言)语句:主要由create、alter、drop和truncate四个关键字完成5、DCL(数据控制...
-
javascript包装对象的用法
js对象是一种复合值:它是属性或已命名值得集合。参考以下代码:vars="helloworld";varlen=th;在该例子中,s是字符串,而字符串不是对象,但为何会有属性呢?其实只要引用了字符串s的属性,js就会将字符串通过调用newString(s)的方式转换为对象,该对象继承了字符串的方法,并被...