關於html表格單元格寬度的計算規則

本文轉載於:猿2048網站➻關於html表格單元格寬度的計算規則

關於表格寬度的渲染規則

表格單元格寬度的計算方式主要分爲兩種方式：固定表格佈局、自動錶格佈局，這個常常寫css的人應該仍是知道的，可是咱們常常會發現給表格列定了寬度不起做用，又或是沒有定寬度渲染出來的倒是正常的嗎，下面就來介紹下這兩個方式具體是怎麼計算渲染的。

先設定幾個通用的變量：

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

1、固定表格佈局，表格添加table-layout:fixed

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

經過使用固定表格佈局，用戶代理在接收到第一行後就能夠顯示錶格，即只有第一行的寬度纔會起做用

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

一、全部th寬度未定義

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

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

二、全部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

三、全部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

四、部分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

五、部分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

2、自動錶格佈局，表格設置table-layout:auto（該屬性默認值就是auto）

每一個列的寬度由單元格中沒有折行的最寬的內容設定的，此種算法有時候會很慢，這是因爲它須要在肯定最終的佈局以前訪問表格中全部的列

一、全部th都未定最小寬度

每一列的寬度徹底由裏面的內容所決定。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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