表格單元格寬度的計(jì)算方式主要分為兩種方式：固定表格布局、自動(dòng)表格布局，這個(gè)經(jīng)常寫css的人應(yīng)該還是知道的，但是我們經(jīng)常會(huì)發(fā)現(xiàn)給表格列定了寬度不起作用，又或是沒有定寬度渲染出來(lái)的卻是正常的嗎，下面就來(lái)介紹下這兩個(gè)方式具體是怎么計(jì)算渲染的。
先設(shè)定幾個(gè)通用的變量：
tableWidth=表格寬度=100%
tableBorderWidth=表格左右邊框?qū)挾?/p>
tdBorderWidth=所有列左右邊框?qū)挾群停ê喜⒌倪吙蛩?px）
tdPadding=所有列左右內(nèi)填補(bǔ)和
tdWidth=所有定義了width的列的寬度和
tdLength=列個(gè)數(shù)
一、固定表格布局，表格添加table-layout:fixed
ps：在固定表格布局中，表格列的寬度與列內(nèi)容多少無(wú)關(guān)，只與表格寬度、列寬度、表格左右邊框、列左右邊框、列左右內(nèi)填補(bǔ)有關(guān)
通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格，即只有第一行的寬度才會(huì)起作用
width為auto的列的寬度（即未定義width的列的寬度,如果計(jì)算結(jié)果為負(fù)數(shù)則為0）= (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength
1、所有th寬度未定義
每列的寬度通過表格寬度平均分配
網(wǎng)友評(píng)論 |
|---|
