table寬度

chenBright發表於2019-02-16

題目雖然是說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權威指南

相關文章