我认为它可以更好地说明...

假设我们的HTML:

<div>What the hack ?</div>


还有我们的CSS:

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


您会注意到<div>的宽度表现得像一个浮动元素:它的大小与其内容一样大,而不是向两侧伸展。

现在开始减小宽度,突然您会看到<div>增大。

这是一个交互式演示:

http://dabblet.com/gist/9891801

这是为什么 ?它是如何工作的 ?

最佳答案

这是数学:

table-cell的宽度为100%,表示您有一个表格,每行有一个单元格。已知宽度-在您的情况下-是文本的宽度(89px)。

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

结论,结束宽度将为100 / {table-cell的宽度} * {element的offsetWidth}

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

关于html - 带有百分比值的表格单元格宽度如何工作?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22762788/

10-11 23:24
查看更多