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

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

tableWidth=表格寬度=100%

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

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

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

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

tdLength=列個(gè)數(shù)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上就是html中關(guān)于表格單元格寬度的計(jì)算規(guī)則的具體介紹的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。