13

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

最近有人在这些地方问了一个问题，让我想知道。

以此为例。

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

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

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

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

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

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

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

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

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

谁能解释这种行为？

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

4

4 回答 4

31

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

于 2013-02-08T17:29:23.183 回答
25

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

会影响 TD 的宽度的优先级是

  1. 表宽

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

  3. 元素（TD）宽度。

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

编辑

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

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

于 2013-02-13T15:38:16.007 回答
1

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

于 2013-02-08T16:00:31.443 回答
0

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

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

于 2013-02-08T07:54:12.643 回答