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; width: 100%; clear: both;}

THEAD {float:left; display: block;}
THEAD TR, THEAD TD, THEAD TH {display: block;}

TBODY {display: block; display: -webkit-box; width: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瀏覽器下出現