【基礎】固定列寬的表格及示例演示

引言

對我來說,table 有一個非常有用,支持性也很好的 CSS 屬性,但它卻很少爲人所知。它改變了表格的渲染方式,並生成一個更加穩定可靠的佈局。

它就是:

table {
  table-layout: fixed;
}

table-layout的缺省值是 auto,這個屬性值及其效果大家十分熟悉。對我來說其效果十分的怪異,具體見如下演示:

表格樣式

查看演示效果

fixed屬性值

應用 table-layout: fixed之後,查看演示效果,可以得出如下結論:

  • 給單元格指定的寬度值生效
  • overflow 屬性生效
  • text-overlfow 屬性生效

查看演示效果

用例及分析

我們以一個用戶信息表格爲例子進行演示。該表格的列寬是固定的,不根據內容的多少而變化;表格內容不折行顯示,超出行寬部分加省略號部分顯示。

表格樣式

查看演示效果

上述表格的顯示效果已經很好了,也比較接近實際項目的需要。

固定列寬的表格算法效果更容易預見,便於使用,同時渲染速度明顯更快。因爲表格的內容並不會影響單元格的寬度,所以在頁面加載過程中,表格不需要頻繁重繪。相信我們都對頁面加載過程中表格不斷重新調整列寬的恐怖情景記憶猶新。對於固定列寬的表格來說,這種情況就不會發生了。

本文主要彙編自 Chris Coyier 的一篇博客。但是因爲本人水平有限,文中難免存在描述不清,代碼不完善等問題,還請大家多多予以批評指正!

參考文獻

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章