table中table-layout設置

• auto 默認值
  在此設置下如果沒有指定table的寬度，則table會根據每列td的寬度自動被撐開，如果沒有顯示指定td的寬度，則td寬度根據內容而定只到table寬度達到視窗寬度，而每列的最小寬度是最短的內容決定的

事例代碼：

<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

注解：
此例中未設置table寬度和td寬度，table總寬度根據具體每個td的寬度撐開，而每個td的寬度由最長的未折行的內容決定

• fixed
  1、此設置下td的寬度不受內容決定，如果首行所有td都未顯式設置寬度，則table會盡可能地將每列的寬度平均分，首行以后的其他行設置的td寬度不會生效
  2、如果首行的td顯示設置了寬度，則該列的寬度也就確定了，首行后的其他行對應這列設置的寬度不會生效

• 經測試可以為td設置width、min-width和max-width但有時顯式指定的寬度值并不一定生效

<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

注解：
上例中顯式規定了table的寬度為600px，再給前兩個td設置了300px的寬度后會發現其顯式時真是寬度并非是300px， 若要讓前面兩列的寬度是設置的300px則可以給table設置一個table-layout為fixed，此時顯式效果為：

Paste_Image.png

注意，此時最后一列的寬度為0，而里面的內容會超出table

總的來說，對td設置寬度后顯示效果與設置不相符的情況出現在顯示為td設置了寬度而其寬度綜合超過了table的寬度（table寬度可能是事先顯式指定也可能未指定而td顯式寬度總和超過視口寬度）
在為超過table寬度的情況下，瀏覽器會優先將設置了寬度的td顯示成對應的寬度值，在超過的時候，瀏覽器會盡可能地將td顯示成設置的寬度值。如果要強制每列按照設置的寬度值顯示，可以將table的布局設置為fixed，但還是要注意保證每列的寬度總和不要超過table的寬度，以免出現詭異的顯示效果。