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

【问题标题】：How table-cell width with percentage value works?具有百分比值的表格单元格宽度如何工作？
【发布时间】：2014-05-10 20:43:47
【问题描述】：

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

假设我们的 HTML：

<div>What the hack ?</div>

还有我们的 CSS：

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

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

现在开始减小宽度，你会突然看到<div> 越来越大。

这是一个交互式演示：

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

【问题讨论】：

如果你删除 display: table-cell 的 css 对我有好处
有或没有table-layout: fixed？当您想要设置宽度时，这会改变一切，因为有两种不同的算法：适合内容或 - 尝试 - 服从作者（你）。但是您的问题可能与anonymous table objects 相关（一个单元格有一个父行和一个父表；如果没有，它们将不知从何而来）。
嗯不知道table-layout我现在正在调查，谢谢@FelipeAls

【解决方案1】：

这是数学：

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

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

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

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

【讨论】：

【解决方案2】：

你真的需要display: table-cell; 属性吗？？

如果你删除了 div 效果很好！

但如果你想要解释，请看this

【讨论】：

谢谢，但您没有回答我的问题。我不是在寻求帮助来开发布局，而是在问为什么当元素显示为table-cell 时，较小的百分比宽度会使元素更宽。即在这种情况下如何计算百分比值。
您的链接是相关的，但仍然不能完全解释为什么会发生这种情况。无论如何，我正在进一步阅读。谢谢。
没问题！！很高兴帮助