關於html表格儲存格寬度的計算規則

標籤：邊框   規則   未定義   orm   設定   分配   lin   決定   fixed   

關於表格寬度的渲染規則

表格儲存格寬度的計算方式主要分為兩種方式：固定表格版面配置、自動表格版面配置，這個經常寫css的人應該還是知道的，但是我們經常會發現給表格列定了寬度不起作用，又或是沒有定寬度渲染出來的卻是正常的嗎，下面就來介紹下這兩個方式具體是怎麼計算渲染的。

先設定幾個通用的變數：

• tableWidth=表格寬度=100%
• tableBorderWidth=表格左右邊框寬度
• tdBorderWidth=所有列左右邊框寬度和（合并的邊框算1px）
• tdPadding=所有列左右內填補和
• tdWidth=所有定義了width的列的寬度和
• tdLength=列個數

一、固定表格版面配置，表格添加table-layout:fixed

ps：在固定表格版面配置中，表格列的寬度與列內容多少無關，只與表格寬度、列寬度、表格左右邊框、列左右邊框、列左右內填補有關

通過使用固定表格版面配置，使用者代理程式在接收到第一行後就可以顯示表格，即只有第一行的寬度才會起作用

width為auto的列的寬度（即未定義width的列的寬度,如果計算結果為負數則為0）= (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength

1、所有th寬度未定義

每列的寬度通過表格寬度平均分配

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2、所有th都定了寬度，同時所有列寬度之和小於表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth）

每列的寬度通過總寬度平均分配；表格的寬度為其定義的寬度

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

3、所有th都定了寬度，同時所有列寬度之和大於表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth）

每列的寬度為自身定義的寬度;表格的寬度為所有列寬度總和（會超出表格定義的寬度）

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

4、部分th定了寬度，同時定了th寬度的列的寬度之後小於表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth）

ps:深灰色背景的列為定義了寬度的列

定義寬度的列的寬度為自身定義的寬度，其他沒有定義寬度的列的寬度為表格總寬度減去定義的寬度之和再平均分配

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

5、部分th定了寬度，同時定了th寬度的列的寬度之後大於表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth）

ps:深灰色背景的列為定義了寬度的列

定義寬度的列的實際寬度為自身定義的寬度，其他沒有定義寬度的列的寬度為表格總寬度減去定義的寬度之和再平均分配，平均分配後的寬度小於零，則其它沒有定義寬度的列的寬度為0

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

二、自動表格版面配置，表格設定table-layout:auto（該屬性預設值就是auto）

每個列的寬度由儲存格中沒有折行的最寬的內容設定的，此種演算法有時候會很慢，這是由於它需要在確定最終的布局之前訪問表格中所有的列

1、所有th都未定最小寬度

每一列的寬度完全由裡面的內容所決定。

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2、所有th都定義了最小寬度，根據內容計算的所有列之和小於表格寬度

每列寬度首先根據內容計算，同時不能小於定義的最小寬度，多餘的寬度每一列上面平均分配點。

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4	row5	row6	row7	row8	row9	row10

3、所有th都定義了最小寬度，根據內容計算的所有列之和大於表格寬度

每列寬度首先根據內容計算，其次不能小於定義的最小寬度

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10

4、部分th定義了最小寬度，根據內容計算的所有列之和小於表格寬度

ps:深灰色背景的列為定義了最小寬度的列

每列寬度首先根據內容計算，其次不能小於定義的最小寬度，最後表格渲染出來的寬度不能小於表格自身定義的寬度。

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2	row3	row4row4row4row4row4row4row4row4	row5	row6	row7	row6	row9	row10

5、部分th定義了最小寬度，根據內容計算的所有列之和小於表格寬度

ps:深灰色背景的列為定義了最小寬度的列

每列寬度首先根據內容計算，其次不能小於定義的最小寬度

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10

關於html表格儲存格寬度的計算規則