表格單元格寬度的計算方式主要分為兩種方式：固定表格布局、自動表格布局，這個經(jīng)常寫css的人應(yīng)該還是知道的，但是我們經(jīng)常會發(fā)現(xiàn)給表格列定了寬度不起作用，又或是沒有定寬度渲染出來的卻是正常的嗎，下面就來介紹下這兩個方式具體是怎么計算渲染的。

先設(shè)定幾個通用的變量：

• tableWidth=表格寬度=100%

• tableBorderWidth=表格左右邊框?qū)挾?/p>

• tdBorderWidth=所有列左右邊框?qū)挾群停ê喜⒌倪吙蛩?px）

• tdPadding=所有列左右內(nèi)填補和

• tdWidth=所有定義了width的列的寬度和

• tdLength=列個數(shù)

一、固定表格布局，表格添加table-layout:fixed

ps：在固定表格布局中，表格列的寬度與列內(nèi)容多少無關(guān)，只與表格寬度、列寬度、表格左右邊框、列左右邊框、列左右內(nèi)填補有關(guān)

通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格，即只有第一行的寬度才會起作用

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

1、所有th寬度未定義

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

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

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

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

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

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

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

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

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

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

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

二、自動表格布局，表格設(shè)置table-layout:auto（該屬性默認值就是auto）

每個列的寬度由單元格中沒有折行的最寬的內(nèi)容設(shè)定的，此種算法有時候會很慢，這是由于它需要在確定最終的布局之前訪問表格中所有的列

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

每一列的寬度完全由里面的內(nèi)容所決定。

2、所有th都定義了最小寬度，根據(jù)內(nèi)容計算的所有列之和小于表格寬度

每列寬度首先根據(jù)內(nèi)容計算，同時不能小于定義的最小寬度，多余的寬度每一列上面平均分配點。

3、所有th都定義了最小寬度，根據(jù)內(nèi)容計算的所有列之和大于表格寬度

每列寬度首先根據(jù)內(nèi)容計算，其次不能小于定義的最小寬度

4、部分th定義了最小寬度，根據(jù)內(nèi)容計算的所有列之和小于表格寬度

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

每列寬度首先根據(jù)內(nèi)容計算，其次不能小于定義的最小寬度，最后表格渲染出來的寬度不能小于表格自身定義的寬度。

5、部分th定義了最小寬度，根據(jù)內(nèi)容計算的所有列之和小于表格寬度

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

每列寬度首先根據(jù)內(nèi)容計算，其次不能小于定義的最小寬度