html - 具有百分比值的表格单元格宽度如何工作？

Question

我认为它的插图更好......

假设我们的 HTML:

<div>What the hack ?</div>

还有我们的 CSS:

div {
  width: 100%;
  display: table-cell;
  background: pink;
}

您会注意到 <div>的宽度表现得像一个 float 元素:它与其内容一样大，而不是向两侧拉伸(stretch)。

现在开始减小宽度，突然间您会看到 <div>成长中。

这是一个交互式演示:

http://dabblet.com/gist/9891801

这是为什么呢？它是如何工作的？

Answer 1

这是数学:

表格单元格的宽度为 100% 意味着您有一个表格，每行有一个单元格。已知宽度 - 在您的情况下 - 是文本的宽度 (89px)。

如果我们将表格单元格的宽度设置为 50%，这意味着该单元格的宽度是整个表格宽度的一半。我们将已知宽度加倍到 178px。

结论，结束宽度将是 100/{table-cell's width} * {element's offsetWidth}

已发布的链接解释了为什么会发生这种情况 http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes