關於表格寬度的渲染規則
表格單元格寬度的計算方式主要分為兩種方式：固定表格布局、自動表格布局，這個經常寫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 |