zoukankan      html  css  js  c++  java
  • Web Responsive Table, 只需CSS使table在手机和平板中完美显示

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

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

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

    主要用到的CSS如下:

    TABLE {display: block;  100%; clear: both;}
    
    THEAD {float:left; display: block;}
    THEAD TR, THEAD TD, THEAD TH {display: block;}
    
    TBODY {display: block; display: -webkit-box; auto; white-space: nowrap; overflow-x: auto; overflow-y: hidden;}
    TBODY TR {display: inline-block; vertical-align: top;}
    TBODY TD, TBODY TH {display: block;}
    

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

    需要注意的是:

    1. table外面千万不能有display为table及相关属性的元素,否则整个页面的横向滚动条依旧会实现。
    2. 我在tbody上加了overflow-y: hidden来避免垂直滚动条在webkit浏览器下出现
  • 相关阅读:
    SpringBoot配置文件(2)
    SpringBoot配置文件(1)
    java8新特性之stream流
    java8新特性之Lambda表达式
    zoj 1709 Oil Deposits
    zoj 2110 Tempter of the Bone
    poj 2823 Sliding Window
    fzu 1894 志愿者选拔
    hdoj 1754 I Hate It
    poj2404中国邮递员
  • 原文地址:https://www.cnblogs.com/jennieji/p/css-responsive-table.html
Copyright © 2011-2022 走看看