html中關於表格單元格寬度的計算規則的具體介紹

關於表格寬度的渲染規則

表格單元格寬度的計算方式主要分為兩種方式： 固定表格佈局、自動表格佈局，這個經常寫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寬度未定義

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

#2、所有寬度

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	#row2row2row2row2row2row2row2	#row3	row4row4row4row4row4row4row4row4	#row# 7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

##。表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth 每列的寬度透過總寬度平均分配；表格的寬度為其定義的寬度#th1th2th3th4th5th6th7th8th9th10row1row1row1row1row1row1row1row1#row2row2 row3row4row4row4row4row4row4row4row4#row5row5row5row5row5row#row5#row####row7 #####row10row10row10row10row10row10row10 ############

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

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

##th2 th3th4th5th6th7th8th9th10row1row1row1row1row1row1row1row1#row2row2row2row2row2row2row2row3row4 ##row5row5row5row5row5row5row5row5#row6#row7row7row7row7row7row7row7row8row8row8row8row8row8row8row8#row9##4、部分th定了寬度，同時定了th寬度的列的寬度之後小於表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth ps:深灰色背景的列為定義了寬度的列定義寬度的列的寬度為自身定義的寬度，其他沒有定義寬度的列的寬度為表格總寬度減去定義的寬度總和再平均分配

th1

th1

th2th3#row2row2row2row2row2row2row2#row3其它

th4	th5	th6	th7	th8	th9	th10			row1row1row1row1row1row1row1row1
row4row4row4row4row4row4row4row4	#row# 7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10		##5、部分th表格寬度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth）	ps:深灰色背景的列為定義了寬度的列	#定義寬度的列的實際寬度為自身定義的寬度，其他沒有定義寬度的列的寬度為表格總寬度減去定義的寬度之和再平均分配，平均分配後的寬度小於零，則	沒有定義寬度的列的寬度為0

th1

#th2

th3

th4

th5th6th7th8th9th10row1row1row1row1row1row1row1row1row2row2row2row2row2row2row2row2#row##row4row4row4row4row4row4row4row4row4row4row4row4row4 7row7row7row8row8row8row8row8row8row8row8row9row9row9row9row9row9row9row9#row10row10row10row10row10row10row10##

二、自動表格佈局，表格設定table-layout:auto（此屬性預設值就是auto）

每個列的寬度由單元格中沒有折行的最寬的內容設定的，此種演算法有時會很慢，這是由於它需要在確定最終的佈局之前訪問表格中所有的列

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

每一列的寬度完全由裡面的內容決定。

th1	#th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	#row	##row4row4row4row4row4row4row4		row4row4row4row4row4row4 7row7row7	row8row8row9列總和小於表格寬度	每列寬度先根據內容計算，同時不能小於定義的最小寬度，多餘的寬度每一列上面平均分配點。

th1

#th2

th3

th4

th5th6th7th8th9th10row1row2row2row2row2row2row2row2row2row3row4row5#row6#row7row8row9row10

						#3、所有th都定義了最小寬度，根據內容計算的所有列之和大於表格寬度	每列寬度先根據內容計算，其次不能小於定義的最小寬度

th1

th2

th3

th4

th5th6th7 th8th9th10row2row2row2row2row2row2row2row2#row3row4row4row4row4row4row4row4row4#row5

			##th10

row6row6row6row6row6row6row6row6

#row7

row6row6row6

4、部分th定義了最小寬度，根據內容計算的所有列總和小於表格寬度ps:深灰色背景的列為定義了最小寬度的列th7th8#row7

每列寬度先根據內容計算，其次不能小於定義的最小寬度，最後表格渲染出來的寬度不能小於表格本身定義的寬度。				th1	#th2	th3	th4	th5	th6
th9	th10			row1	row2	row3	#row4row4row4row4row4row4row4row4	row5	#row6

##row5#######row6#######row7# #####row6######row9######row10#############

5、部分th定義了最小寬度，根據內容計算的所有列總和小於表格寬度

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

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

#row2row4row4row4row4row4##row4row4row4row4row4row4row4

#th1	th2	th3	th4	th5	th6	th7	th8	th9	#th10
#row1							##row4row4row4row4row4row4row4

#########row4row4row5 #####row6row6row6row6row6row6row6row6######row7######row6row6row6row6row6row6row6#######row9#######row10row10row10row10row101110#######row10####11010####110

以上是html中關於表格單元格寬度的計算規則的具體介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！