如何计算`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类似，它也取其父级的宽度.i.e。，table，并且在其兄弟之间的宽度方面平均分配。例如，如果你有200px宽的表格和5个单元格（并且它们都没有手动定义宽度），那么table-cell中的所有px将等于40px。 .. {{1}}每个!!