table寬度

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

table-layout

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

fixed

採用固定表格佈局演算法對表格佈局。表格的寬度有width決定，列的寬度有首行單元格的width決定。
分析一下，這裡table計算寬度為200px，第一列的計算寬度為100px，第二列計算寬度為20px，第三列與第四列的計算寬度為33px。第三列和第四列的寬度是由table
寬度減第一列和第二列寬度總和以及單元格左右border寬度，再除以2得到。也許你會問，為什麼「1-3」所在td不是定義了width嗎？為什麼第三列是計算得到的？答：因為定義了width的td不位於首行，th才是位於首行。

規則

1. 如果設定了列元素（col），則列元素的width被設定為列的寬度。

2. 列元素的width為auto，或沒有設定列元素，首行單元格的width將被設定為所在列的寬度。

3. 如果不符合以上兩種情況，則由瀏覽器計算決定。

auto（預設值）

採用自動表格佈局演算法對表格佈局。表格及單元格的寬度取決於其包含的內容（還是可以為單元格設定width的）。

規則

1. 計算最小單元格寬度

   1.1 计算每个单元格的最小内容宽度：内容可以流入多行，但不能超出单元格。
   1.2 如果单元格的width值大于最小可能宽度，则最小单元格宽度为单元格的width值。
   1.3 如果单元格的width值为auto，则最小单元格宽度为为最小内容宽度。

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

3. 列中所有單元格的最小單元格寬度的最大值

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

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

更多table寬度相關文章請關注PHP中文網！

🎜