如何计算`display：table-cell`宽度？ [英] How are `display: table-cell` widths calculated?

问题描述

这个问题来自

>

如果我接着第二个例子，但将 width：100％添加到 .table ，然后再回到100％。 这是结果（小提示链接） 。 p>



我相信有一个逻辑的解释，但我只是没有看到它。

解决方案

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

一般来说，如果表没有指定的宽度（即它使用默认的 auto ），那么具有百分比宽度的单元格就像其内容所要求的一样宽，没有更多。然后将计算的宽度（与其他单元格上指定的任何其他宽度一起）用作百分比，以查找整个表的最大宽度，并相应地调整其余列。请注意，表仍然可以通过其包含块（在您的示例中，它是由结果窗格建立的初始包含块）约束。

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

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

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

This question comes out of this existing question which I provided a solution to, but couldn't provide an explanation as to why.

I've stripped their fiddle right down to the bare bones and have the following 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;
}

Only .cell-1 has a width and that is 1%. This is the result (fiddle link):

If I then increase the width of .cell-1 to a value where it is wider than it's content, say 10% (I think that's the pattern anyway) then second cell will become narrower. Why? Where does that width come from? This is the result (fiddle link).

If I then take the second example, but add width: 100% to the .table then it goes back to 100% again. Here's the result of that (fiddle link).

I'm sure there's a logical explanation but I'm just not seeing it. Anyone?

解决方案

This is the result of the automatic table layout algorithm as implemented by the browser. This can vary across browsers because the CSS2.1 spec doesn't specify all auto layout behavior, but it does outline an algorithm commonly used by browsers with HTML tables, because the CSS table model is based on the HTML table model for the most part.

In general, if the table doesn't have a specified width (i.e. it uses the default auto), then the cell with the percentage width is as wide as required by its contents, and no more. That calculated width (together with any other widths specified on other cells) is then used as the percentage to find the maximum width of the entire table, and the rest of the columns are resized accordingly. Note that the table can still be constrained by its containing block (in your example, it's the initial containing block established by the result pane).

On my PC running Firefox, .cell-1 has a computed width of 33 pixels. When you specify its width as 1%, the maximum width that the table will have is 3300 pixels (33 × 100 = 3300). You would need a very large screen to see this in your example, so I removed the padding which drastically reduces the width of .cell-1 to 9 pixels and thus the maximum table width to 900 pixels. If you resize the preview pane to greater than 900 pixels, you will see that the table stops growing at that point.

When you increase the width of .cell-1 to 10%, the same 33 pixels now becomes 10% of the maximum width of the table. In turn, the maximum table width becomes 330 pixels (which is in fact 10% of 3300 pixels, because 100 ÷ 10 = 10).

The moment you specify the width of .table as 100%, the table is sized according to its containing block. In your case, that just means stretching it to the full width of the result pane. .cell-1 still has to obey its width: 10% declaration, so it stretches to 10% of the width of the table since the content doesn't require anything wider. If you resize the result pane to a very narrow width, you'll see that .cell-1 shrinks along with the table, but not past its minimum content width.

这篇关于如何计算`display：table-cell`宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！