表格單元格寬度的計算方式主要分為兩種方式： 固定表格佈局、自動表格佈局，這個經常寫css的人應該還是知道的，但是我們經常會發現給表格列定了寬度不起作用，又或是沒有定寬度渲染出來的卻是正常的嗎，以下就來介紹下這兩個方式具體是怎麼計算渲染的。
先設定幾個通用的變數：
tableWidth=表格寬度=100%
tableBorderWidth=表格左右邊框寬度
tdBorderWidth=所有列左右邊框寬度和（合併的邊框算1px）
tdPadding=所有列左右內填補和
#tdWidth=所有定義了width的列的寬度和
#tdLength=列數
ps：在固定表格佈局中，表格列的寬度與列內容多少無關，只與表格寬度、列寬度、表格左右邊框、列左右邊框、列左右內填補有關
透過使用固定表格佈局，使用者代理程式在接收第一行後就可以顯示表格，即只有第一行的寬度才會起作用
width為auto的列的寬度（即未定義width的列的寬度,如果計算結果為負數則為0）= (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength
#每列的寬度透過表格寬度平均分配
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | #row2row2row2row2row2row2row2 | #row3 | row4row4row4row4row4row4row4row4 | #row# 7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
| #th1 | th2 | th3 | th4 | th5 | th6 | ||||
|---|---|---|---|---|---|---|---|---|---|
| th9 | th10 | row1row1row1row1row1row1row1row1 | #row2row2 row3 | row4row4row4row4row4row4row4row4 | #row5row5row5row5row5row#row5 |
每列的寬度為自身定義的寬度;表格的寬度為所有列寬度總和（會超出表格定義的寬度）
| th1 | ##th2th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 | |
|---|---|---|---|---|---|---|---|---|---|
| #row2row2row2row2row2row2row2 | row3 | row4 ##row5row5row5row5row5row5row5row5 | #row6 | #row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | #row9 | ##4、部分th定了寬度，同時定了th寬度的列的寬度之後小於表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth） | ps:深灰色背景的列為定義了寬度的列 |
th1
| th4 | th5 | th6 | th7 | th8 | th9 | th10 | row1row1row1row1row1row1row1row1 | ||
|---|---|---|---|---|---|---|---|---|---|
| row4row4row4row4row4row4row4row4 | #row# 7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 | ##5、部分th表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth） | ps:深灰色背景的列為定義了寬度的列 | #定義寬度的列的實際寬度為自身定義的寬度，其他沒有定義寬度的列的寬度為表格總寬度減去定義的寬度之和再平均分配，平均分配後的寬度小於零，則 | 其它沒有定義寬度的列的寬度為0 |
th4
| th7 | th8 | th9 | th10 | row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | #row | ##row4row4row4row4row4row4row4 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | #row10row10row10row10row10row10row10 | ## |
| th1 | #th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | #row | ##row4row4row4row4row4row4row4 | row4row4row4row4row4row4 7row7row7 | row8row8row9列總和小於表格寬度 | 每列寬度先根據內容計算，同時不能小於定義的最小寬度，多餘的寬度每一列上面平均分配點。 |
th4
| th7 | th8 | th9 | th10 | row1 | row2row2row2row2row2row2row2row2 | row3 | row4 | ||
|---|---|---|---|---|---|---|---|---|---|
| #row7 | row8 | row9 | row10 | #3、所有th都定義了最小寬度，根據內容計算的所有列之和大於表格寬度 | 每列寬度先根據內容計算，其次不能小於定義的最小寬度 |
th4
| th7 | th8 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| ##th10 | row2row2row2row2row2row2row2row2 | #row3 | row4row4row4row4row4row4row4row4 |
#row7
row6row6row6
| 每列寬度先根據內容計算，其次不能小於定義的最小寬度，最後表格渲染出來的寬度不能小於表格本身定義的寬度。 | th1 | #th2 | th3 | th4 | th5 | th6 | |||
|---|---|---|---|---|---|---|---|---|---|
| th9 | th10 | row1 | row2 | row3 | #row4row4row4row4row4row4row4row4 | row5 | #row6 |
ps:深灰色背景的列為定義了最小寬度的列
每列寬度先根據內容計算，其次不能小於定義的最小寬度
| #th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | #th10 |
|---|---|---|---|---|---|---|---|---|---|
| #row1 | #row2row4row4row4row4row4 | ##row4row4row4row4row4row4row4 | ##row4row4row4row4row4row4row4 |
以上是html中關於表格單元格寬度的計算規則的具體介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
