表格單元格寬度的計(jì)算方式主要分為兩種方式：固定表格布局、自動(dòng)表格布局，這個(gè)經(jīng)常寫(xiě)css的人應(yīng)該還是知道的，但是我們經(jīng)常會(huì)發(fā)現(xiàn)給表格列定了寬度不起作用，又或是沒(méi)有定寬度渲染出來(lái)的卻是正常的嗎，下面就來(lái)介紹下這兩個(gè)方式具體是怎么計(jì)算渲染的。
先設(shè)定幾個(gè)通用的變量：
tableWidth=表格寬度=100%
tableBorderWidth=表格左右邊框?qū)挾?/p>
tdBorderWidth=所有列左右邊框?qū)挾群停ê喜⒌倪吙蛩?px）
tdPadding=所有列左右內(nèi)填補(bǔ)和
tdWidth=所有定義了width的列的寬度和
tdLength=列個(gè)數(shù)
一、固定表格布局，表格添加table-layout:fixed
ps：在固定表格布局中，表格列的寬度與列內(nèi)容多少無(wú)關(guān)，只與表格寬度、列寬度、表格左右邊框、列左右邊框、列左右內(nèi)填補(bǔ)有關(guān)
通過(guò)使用固定表格布局，用戶(hù)代理在接收到第一行后就可以顯示表格，即只有第一行的寬度才會(huì)起作用
width為auto的列的寬度（即未定義width的列的寬度,如果計(jì)算結(jié)果為負(fù)數(shù)則為0）= (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength
1、所有th寬度未定義
每列的寬度通過(guò)表格寬度平均分配
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
2、所有th都定了寬度，同時(shí)所有列寬度之和小于表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth）
每列的寬度通過(guò)總寬度平均分配；表格的寬度為其定義的寬度
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
3、所有th都定了寬度，同時(shí)所有列寬度之和大于表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth）
每列的寬度為自身定義的寬度;表格的寬度為所有列寬度總和（會(huì)超出表格定義的寬度）
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
4、部分th定了寬度，同時(shí)定了th寬度的列的寬度之后小于表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth）
ps:深灰色背景的列為定義了寬度的列
定義寬度的列的寬度為自身定義的寬度，其他沒(méi)有定義寬度的列的寬度為表格總寬度減去定義的寬度之和再平均分配
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
5、部分th定了寬度，同時(shí)定了th寬度的列的寬度之后大于表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth）
ps:深灰色背景的列為定義了寬度的列
定義寬度的列的實(shí)際寬度為自身定義的寬度，其他沒(méi)有定義寬度的列的寬度為表格總寬度減去定義的寬度之和再平均分配，平均分配后的寬度小于零，則其它沒(méi)有定義寬度的列的寬度為0
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
二、自動(dòng)表格布局，表格設(shè)置table-layout:auto（該屬性默認(rèn)值就是auto）
每個(gè)列的寬度由單元格中沒(méi)有折行的最寬的內(nèi)容設(shè)定的，此種算法有時(shí)候會(huì)很慢，這是由于它需要在確定最終的布局之前訪問(wèn)表格中所有的列
1、所有th都未定最小寬度
每一列的寬度完全由里面的內(nèi)容所決定。
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
2、所有th都定義了最小寬度，根據(jù)內(nèi)容計(jì)算的所有列之和小于表格寬度
每列寬度首先根據(jù)內(nèi)容計(jì)算，同時(shí)不能小于定義的最小寬度，多余的寬度每一列上面平均分配點(diǎn)。
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1 | row2row2row2row2row2row2row2row2 | row3 | row4 | row5 | row6 | row7 | row8 | row9 | row10 |
3、所有th都定義了最小寬度，根據(jù)內(nèi)容計(jì)算的所有列之和大于表格寬度
每列寬度首先根據(jù)內(nèi)容計(jì)算，其次不能小于定義的最小寬度
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5 | row6row6row6row6row6row6row6row6 | row7 | row6row6row6row6row6row6row6row6 | row9 | row10row10row10row10row10row10row10 |
4、部分th定義了最小寬度，根據(jù)內(nèi)容計(jì)算的所有列之和小于表格寬度
ps:深灰色背景的列為定義了最小寬度的列
每列寬度首先根據(jù)內(nèi)容計(jì)算，其次不能小于定義的最小寬度，最后表格渲染出來(lái)的寬度不能小于表格自身定義的寬度。
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1 | row2 | row3 | row4row4row4row4row4row4row4row4 | row5 | row6 | row7 | row6 | row9 | row10 |
5、部分th定義了最小寬度，根據(jù)內(nèi)容計(jì)算的所有列之和小于表格寬度
ps:深灰色背景的列為定義了最小寬度的列
每列寬度首先根據(jù)內(nèi)容計(jì)算，其次不能小于定義的最小寬度
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|
| row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5 | row6row6row6row6row6row6row6row6 | row7 | row6row6row6row6row6row6row6row6 | row9 | row10row10row10row10row10row10row10 |
400 186 1886
