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

Question

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

我已经将他们的小提琴完全剥离并拥有以下 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），那么具有百分比宽度的单元格的宽度与其内容所需的宽度一样，仅此而已。然后将计算出的宽度（与其他单元格上指定的任何其他宽度一起）用作百分比来找到整个表格的最大宽度，并相应地调整其余列的大小。请注意，该表仍可能受其包含块的约束（在您的示例中，它是结果窗格建立的初始包含块）。

在我运行 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。如果您将预览窗格的大小调整为大于 900 像素，您将看到表格在该点停止增长。

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

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

Answer 2

默认情况下，CSS tables 有 3 个组件来代替 HTML tables

• display:table

  默认情况下，这将采用内容宽度，除非 UA 样式使用 width: xx% 属性覆盖它

• display:table-row

  此属性本身没有高度，仅遵循td 的尺寸，即其中的表格单元格。

• display:table-cell

  与display:table 一样，它也采用其父级的宽度，即table，并在其兄弟级之间平均分配宽度。例如，如果您有 200px 宽的表格，其中有 5 个单元格（它们都没有手动定义宽度），那么所有的 table-cell 将等于 px 其中...@987654332 @每个！！