html - `display: table-cell` 宽度是如何计算的？

Question

这个问题出自this existing question我提供了解决方案，但无法解释原因。

我已经将他们的 fiddle 精简到只剩骨架，并具有以下 HTML/CSS:

<div class="table">
  <span class="cell-1">cell 1</span>
  <span class="cell-2">cell 2</span>
</div>

.table {
  display: table;
}

.cell-1, .cell-2 {
  display: table-cell;
  padding: 6px 12px;
  border: 1px solid #ccc;
}

.cell-1 {
  padding: 6px 12px;
  background-color: #eee;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  width: 1%; /* *** FOCUS HERE *** */
}

.cell-2 {
  border-radius: 0 4px 4px 0;
}

只有 .cell-1 有宽度，即 1%。 <强> This is the result (fiddle link) :

如果我随后将 .cell-1 的宽度增加到比其内容更宽的值，比如 10%(我认为这就是模式)，那么第二个单元格将变得更窄。为什么？这个宽度从何而来？ <强> This is the result (fiddle link).

如果我接着使用第二个示例，但将 width: 100% 添加到 .table 中，它会再次回到 100%。 <强> Here's the result of that (fiddle link) .

我确信有一个合乎逻辑的解释，但我只是没有看到。有人吗？

Answer 1

这是浏览器实现的自动表格布局算法的结果。这可能因浏览器而异，因为 the CSS2.1 spec doesn't specify all auto layout behavior , 但它确实概述了浏览器通常使用 HTML 表格的算法，因为 CSS 表格模型大部分基于 HTML 表格模型。

通常，如果表格没有指定宽度(即它使用默认的 auto)，那么具有百分比宽度的单元格与其内容所要求的一样宽，并且没有更多的。然后将计算出的宽度(与其他单元格上指定的任何其他宽度一起)用作找到整个表格的最大宽度的百分比，其余列将相应地调整大小。请注意，该表仍可能受其包含 block 的约束(在您的示例中，它是由结果 Pane 建立的初始包含 block )。

在我运行 Firefox 的 PC 上，.cell-1 的计算宽度为 33 像素。当您将其宽度指定为 1% 时，表格的最大宽度为 3300 像素 (33 × 100 = 3300)。你需要一个非常大的屏幕才能在你的例子中看到这个，所以 I removed the padding which drastically reduces the width of .cell-1 to 9 pixels and thus the maximum table width to 900 pixels .如果将预览 Pane 的大小调整为大于 900 像素，您将看到表格在此时停止增长。

当您将 .cell-1 的宽度增加到 10% 时，同样的 33 个像素现在变为表格最大宽度的 10%。反过来，最大表格宽度变为 330 像素(实际上是 3300 像素的 10%，因为 100 ÷ 10 = 10)。

当您将 .table 的宽度指定为 100% 时，表格会根据其包含 block 调整大小。在您的情况下，这仅意味着将其拉伸(stretch)到结果 Pane 的整个宽度。 .cell-1 仍然必须遵守其 width: 10% 声明，因此它延伸到表格宽度的 10%，因为内容不需要任何更宽的东西.如果将结果 Pane 的大小调整为非常窄的宽度，您会看到 .cell-1 与表格一起缩小，但不会超过其最小内容宽度。