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

引言

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

它就是：

table {
  table-layout: fixed;
}

table-layout的缺省值是 auto，這個屬性值及其效果你們十分熟悉。對我來講其效果十分的怪異，具體見以下演示：

查看演示效果

fixed屬性值

應用 table-layout： fixed以後，查看演示效果，能夠得出以下結論：

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

查看演示效果

用例及分析

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

查看演示效果

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

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

本文主要彙編自 Chris Coyier 的一篇博客。可是由於本人水平有限，文中不免存在描述不清，代碼不完善等問題，還請你們多多予以批評指正！

參考文獻

• Fixed Table Layouts
• MDN table-layout
• CSS-trick table-layout