table中table-layout设置
auto 默认值
在此设置下如果没有指定table的宽度,则table会根据每列td的宽度自动被撑开,如果没有显示指定td的宽度,则td宽度根据内容而定只到table宽度达到视窗宽度,而每列的最小宽度是最短的内容决定的
事例代码:
效果:
Paste_Image.png
注解:
此例中未设置table宽度和td宽度,table总宽度根据具体每个td的宽度撑开,而每个td的宽度由最长的未折行的内容决定
fixed
1、此设置下td的宽度不受内容决定,如果首行所有td都未显式设置宽度,则table会尽可能地将每列的宽度平均分,首行以后的其他行设置的td宽度不会生效
2、如果首行的td显示设置了宽度,则该列的宽度也就确定了,首行后的其他行对应这列设置的宽度不会生效
经测试可以为td设置width、min-width和max-width但有时显式指定的宽度值并不一定生效
效果:
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的宽度,以免出现诡异的显示效果。