table中table-layout設(shè)置
- auto 默認(rèn)值
在此設(shè)置下如果沒有指定table的寬度,則table會(huì)根據(jù)每列td的寬度自動(dòng)被撐開,如果沒有顯示指定td的寬度,則td寬度根據(jù)內(nèi)容而定只到table寬度達(dá)到視窗寬度,而每列的最小寬度是最短的內(nèi)容決定的
事例代碼:
<table>
<tr>
<td>123</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quod vel repellat perferendis est sequi explicabo nobis corporis cum, odit magnam, adipisci praesentium magni odio quibusdam amet voluptatibus, eligendi minus.</td>
<td>1231231</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>1231231</td>
</tr>
</table>
效果:

注解:
此例中未設(shè)置table寬度和td寬度,table總寬度根據(jù)具體每個(gè)td的寬度撐開,而每個(gè)td的寬度由最長(zhǎng)的未折行的內(nèi)容決定
fixed
1、此設(shè)置下td的寬度不受內(nèi)容決定,如果首行所有td都未顯式設(shè)置寬度,則table會(huì)盡可能地將每列的寬度平均分,首行以后的其他行設(shè)置的td寬度不會(huì)生效
2、如果首行的td顯示設(shè)置了寬度,則該列的寬度也就確定了,首行后的其他行對(duì)應(yīng)這列設(shè)置的寬度不會(huì)生效經(jīng)測(cè)試可以為td設(shè)置width、min-width和max-width但有時(shí)顯式指定的寬度值并不一定生效
<table style="width: 600px;">
<tr>
<td style="width: 300px;">我是300px</td>
<td style="width: 300px;">我也是300px Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, voluptate maiores voluptatum architecto explicabo! Distinctio impedit quaerat ipsa laudantium. Consequuntur dolor eaque, reprehenderit. Consequuntur molestiae soluta tempora corporis unde alias! </td>
<td>1231231</td>
</tr>
</table>
效果:



注解:
上例中顯式規(guī)定了table的寬度為600px,再給前兩個(gè)td設(shè)置了300px的寬度后會(huì)發(fā)現(xiàn)其顯式時(shí)真是寬度并非是300px, 若要讓前面兩列的寬度是設(shè)置的300px則可以給table設(shè)置一個(gè)table-layout為fixed,此時(shí)顯式效果為:

注意,此時(shí)最后一列的寬度為0,而里面的內(nèi)容會(huì)超出table
總的來說,對(duì)td設(shè)置寬度后顯示效果與設(shè)置不相符的情況出現(xiàn)在顯示為td設(shè)置了寬度而其寬度綜合超過了table的寬度(table寬度可能是事先顯式指定也可能未指定而td顯式寬度總和超過視口寬度)
在為超過table寬度的情況下,瀏覽器會(huì)優(yōu)先將設(shè)置了寬度的td顯示成對(duì)應(yīng)的寬度值,在超過的時(shí)候,瀏覽器會(huì)盡可能地將td顯示成設(shè)置的寬度值。如果要強(qiáng)制每列按照設(shè)置的寬度值顯示,可以將table的布局設(shè)置為fixed,但還是要注意保證每列的寬度總和不要超過table的寬度,以免出現(xiàn)詭異的顯示效果。