为什么TD宽度不起作用或未遵循？

Question

原始问题:HTML是否<table>具有默认宽度？

最近有人在这些问题的某个地方问了一个问题,让我感到疑惑.

以此为例.

http://jsfiddle.net/rqmNY/1/

在这个小提琴中,如果你要检查它的宽度(我正在使用chrome中的inspect元素),它会100px按预期工作.

让我们再添加几个"td",我们将看到td:100px"css"被忽略了.

http://jsfiddle.net/rqmNY/2/

如您所见,现在它是83px而不是100px最初的预期.

但是,让我说,我回到更少的TD(7),并且我为每个TD元素(500px)添加更宽的宽度,结果是td的宽度被卡住了119px.

http://jsfiddle.net/rqmNY/6/

最后,假设我有一个2000px宽度的表,宽度的td 100px和许多td元素. http://jsfiddle.net/rqmNY/7/

现在表宽度会覆盖TD宽度,并将td的宽度扩展为222px.

谁能解释这种行为？

ps请注意,在所有情况下,inspect元素工具告诉我宽度始终对应于css,它只是最终结果没有正确显示.

Answer 1

你有没有尝试过加入display:inline-block你的TD CSS？这会强制浏览器不要忽略您的TD宽度.

Answer 2

我非常相信这个问题的答案是这样的:

影响TD的宽度优先级是

1. 表宽度

2. 父元素宽度(如果没有,则为视口)

3. 元素(TD)宽度.

因此,如果设置了表格宽度,则TD将始终调整为表格的宽度.但是,如果未设置宽度,则"主"宽度将是视口的宽度.除非CSS代码另有说明,否则这是正确的.并且仅当TD的总宽度小于视口的总宽度时,才考虑元素宽度.

编辑

1. 表格宽度将始终覆盖TD宽度.

2. 仅在超出视口宽度时才会遵循指定的TD宽度,并且视口宽度将被视为优先级.