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

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%.这是结果(小提琴链接):

如果我然后将宽度增加到宽度.cell-1超过其内容的值,比如10%(我认为这是模式),那么第二个单元格将变得更窄.为什么？那个宽度来自哪里？ 这是结果(小提琴链接).

如果我然后采取第二个例子,但添加width: 100%到.table那么它再次回到100%. 这是结果(小提琴链接).

我确信这是一个合乎逻辑的解释,但我只是没有看到它.任何人？

Answer 1

这是浏览器实现的自动表格布局算法的结果.这可能因浏览器而异,因为CSS2.1规范没有指定所有自动布局行为,但它确实概述了具有HTML表的浏览器常用的算法,因为CSS表模型大部分基于HTML表模型.

通常,如果表没有指定的宽度(即它使用默认值auto),则宽度百分比的单元格与其内容所需的宽度一样宽,而不是更多.然后将计算出的宽度(以及在其他单元格上指定的任何其他宽度)用作查找整个表格的最大宽度的百分比,并相应地调整其余列的大小.请注意,该表仍然可以通过其包含块进行约束(在您的示例中,它是由结果窗格建立的初始包含块).

在我运行Firefox的PC上,.cell-1计算宽度为33像素.将宽度指定为1%时,表格的最大宽度为3300像素(33×100 = 3300).您需要一个非常大的屏幕才能在您的示例中看到这一点,因此我删除了填充,这大大减小了.cell-19像素的宽度,因此最大表宽度减少到900像素.如果将预览窗格的大小调整为大于900像素,则会看到该表在此时停止增长.

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

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