表格單元格寬度的計算方式主要分為兩種方式：固定表格布局、自動表格布局，這個經常寫css的人應該還是知道的，但是我們經常會發(fā)現(xiàn)給表格列定了寬度不起作用，又或是沒有定寬度渲染出來的卻是正常的嗎，下面就來介紹下這兩個方式具體是怎么計算渲染的。
先設定幾個通用的變量：
tableWidth=表格寬度=100%
tableBorderWidth=表格左右邊框寬度
tdBorderWidth=所有列左右邊框寬度和（合并的邊框算1px）
tdPadding=所有列左右內填補和
tdWidth=所有定義了width的列的寬度和
tdLength=列個數(shù)
一、固定表格布局，表格添加table-layout:fixed
ps：在固定表格布局中，表格列的寬度與列內容多少無關，只與表格寬度、列寬度、表格左右邊框、列左右邊框、列左右內填補有關
通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格，即只有第一行的寬度才會起作用
width為auto的列的寬度（即未定義width的列的寬度,如果計算結果為負數(shù)則為0）= (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength
1、所有th寬度未定義
每列的寬度通過表格寬度平均分配
延伸閱讀
 學習是年輕人改變自己的最好方式
我想了解如何學習 |
|---|