html表格td宽度设置 table以及td宽度设置细节

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

如果觉得《html表格td宽度设置 table以及td宽度设置细节》对你有帮助，请点赞、收藏，并留下你的观点哦！