table寬度

題目雖然是說table的寬度，但其實最讓人抓狂的是單元格td的寬度。平時開發中也常常會遇到這方面的問題，因此我找資料學習table的寬度的算法。

table-layout

table-layout定義了表格佈局算法，值爲auto或fixed。

fixed

採用固定表格佈局算法對錶格佈局。表格的寬度有width決定，列的寬度有首行單元格的width決定。
先上一個demo。
分析一下，這裏table計算寬度爲200px，第一列的計算寬度爲100px，第二列計算寬度爲20px，第三列和第四列的計算寬度爲33px。第三列和第四列的寬度是由table
寬度減第一列和第二列寬度之和以及單元格左右border寬度，再除以2獲得。也許你會問，爲何「1-3」所在td不是定義了width嗎？爲何第三列是計算獲得的？答：由於定義了width的td不位於首行，th纔是位於首行。

規則

1. 若是設置了列元素（col），列元素的width被設置爲列的寬度。demo

2. 列元素的width爲auto，或者沒有設置列元素（如第一個demo），首行單元格的width將被設置爲所在列的寬度。

3. 若是不符合以上兩種狀況，則由瀏覽器計算肯定。

auto（默認值）

採用自動錶格佈局算法對錶格佈局。表格及單元格的寬度取決於其包含的內容（仍是能夠爲單元格設置width的）。

規則

1. 計算最小單元格寬度

   1.1 計算每一個單元格的最小內容寬度：內容能夠流入多行，但不能超出單元格。
   1.2 若是單元格的width值大於最小可能寬度，則最小單元格寬度爲單元格的width值。
   1.3 若是單元格的width值爲auto，則最小單元格寬度爲爲最小內容寬度。

2. 計算最大單元格寬度：徹底顯示內容且不換行（不考慮顯示換行）時所需的寬度

3. 計算最小列寬：該列中全部單元格的最小單元格寬度的最大值

4. 計算最大列寬：該列中全部單元格的最大單元格寬度的最大值

5. 若是單元格跨列，最小列寬之和必須等於這個跨列單元格的最小單元格寬度。最大列寬必須等於這個單元格的最大單元格寬度。

demo

其餘

但table的width爲auto時，即便table-layout爲fixed，都會採用自動佈局算法。demo

參考

1. W3C CSS2.1中文文檔

2. MDN

3. CSS權威指南