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宽度的表，宽度为100px的td，以及许多td元素。 http://jsfiddle.net/rqmNY/7/

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

任何人都可以解释这种行为吗？

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

Answer 1

您是否尝试将display:inline-block添加到您的TD CSS？这会强制浏览器不要忽略您的TD宽度。

Answer 2

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

影响TD的宽度优先级为

表格宽度
父元素宽度（如果没有，则为视口）
元素（TD）宽度。

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

修改

表格宽度将始终覆盖TD宽度。

只有在超出视口宽度时才会遵循规定的TD宽度，视口宽度将被视为优先级。

Answer 3

实际上，当您未指定表格宽度时，表格宽度取决于单元格宽度。但是当您指定表格宽度时，它将忽略td宽度。请看以下示例：

<table>
  <tr>
    <td>Column 1</td>
  </tr>
  <tr>
    <td>Column 2</td>
  </tr>
</table>

如果您使用

td { 
  width:500px;
}

然后表格宽度为1000px。

但是如果你使用

table {
  width:500px;
} 
td { 
  width:500px;
}

它将忽略<td>宽度，表格宽度为500px。

Answer 4

根据w3文档Here它说“在没有任何宽度规范的情况下，表格宽度由用户代理确定。”

我能想到的是 td 宽度始终取决于表格宽度。如果您指定或不指定。如果您有一个宽度为500px的表格和两个宽度为200px的TD。现在，在表中添加这两个TD之后，剩余100px以便容纳，因此50px每个都被添加到覆盖原始宽度属性的TD。请参阅此链接http://jsfiddle.net/rqmNY/7/

为什么TD宽度无法正常工作？

4 个答案: