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

Question

原问题：HTML <table> 有默认宽度吗？

最近有人问了一个类似这些问题的问题，让我感到疑惑。

以此为例。

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

在这个小提琴中，如果您要检查它的宽度（我正在使用 chrome 中的检查元素），它会显示 100px，按预期工作。

让我们再添加几个“td”，我们将看到“td:100px”css 被忽略了。

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

如您所见，现在它是 83 像素，而不是最初预期的 100px。

但是假设我退回到更少的 TD (7)，并为每个 TD 元素添加更宽的宽度 (500px)，结果是 td 的宽度卡在119px。

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

最后，假设我有一个宽度为 2000 像素的表格，宽度为 100px 的 td，以及许多 td 元素。 http://jsfiddle.net/rqmNY/7/

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

谁能解释这种行为？

附言请注意，在所有情况下，检查元素工具都会告诉我宽度始终对应于 css，只是最终结果显示不正确。

Answer 1

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

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

Answer 2

如果不指定表格宽度，实际上表格宽度取决于单元格宽度。但是当您指定表格宽度时，它将忽略 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 3

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

Answer 4

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

会影响TD的宽度优先级是

1. 表格宽度

2. 父元素宽度（如果没有，视口）

3. 元素（TD）宽度。

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

编辑

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

2. 仅会遵循规定的 TD 宽度，直到超过视口宽度，视口宽度将被优先考虑。