Web Responsive Table, 只需CSS使table在手机和平板中完美显示

在做responsive或者手机版页面的时候,经常碰到<Table>在手机和平板中会因为长度问题把页面撑大。最近看到一个比较好,比较方便的方法,而且仅仅用CSS 2就可以实现!

实例URL:http://dbushell.com/demos/tables/rt_05-01-12.html

已经验证支持webkit引擎及firefox,很可惜IE这个混蛋不能改table标签的display属性。慢点看看有没有什么trick的方法可以做到兼容。

主要用到的CSS如下:

可以从CSS中看到,作者主要是运用了display: block的元素中的内容会环绕float的元素四周的特性,以及这两种元素自适应的能力。

需要注意的是:

  1. table外面千万不能有display为table及相关属性的元素,否则整个页面的横向滚动条依旧会实现。
  2. 我在tbody上加了overflow-y: hidden来避免垂直滚动条在webkit浏览器下出现

Web Responsive Table, 只需CSS使table在手机和平板中完美显示,布布扣,bubuko.com

Web Responsive Table, 只需CSS使table在手机和平板中完美显示

上一篇:Android开发之使用Preferences设计软件设置界面(图文源代码分享)


下一篇:Android 服务(service)的生命周期以及利用bindservice调用服务里面的方法