table以及td寬度設(shè)置細(xì)節(jié)

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>

效果:

Paste_Image.png

注解:
此例中未設(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>

效果:

Paste_Image.png
Paste_Image.png
Paste_Image.png

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

Paste_Image.png

注意,此時(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)詭異的顯示效果。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,119評(píng)論 1 92
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,526評(píng)論 1 41
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,114評(píng)論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,429評(píng)論 0 11
  • linux資料總章2.1 1.0寫的不好抱歉 但是2.0已經(jīng)改了很多 但是錯(cuò)誤還是無法避免 以后資料會(huì)慢慢更新 大...
    數(shù)據(jù)革命閱讀 13,209評(píng)論 2 33

友情鏈接更多精彩內(nèi)容