表格單元格寬度的計算方式主要分為兩種方式：固定表格布局、自動表格布局，這個經(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寬度未定義
每列的寬度通過表格寬度平均分配
延伸閱讀
 學(xué)習(xí)是年輕人改變自己的最好方式
我想了解如何學(xué)習(xí) |
|---|