table以及td宽度设置细节

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的宽度，以免出现诡异的显示效果。