如何计算“显示:表格-单元格”宽度？

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)，那么具有百分比宽度的单元格就会按照其内容所要求的那样宽，而不会更宽。然后将计算出来的宽度(以及其他单元格上指定的任何其他宽度)作为百分比来查找整个表的最大宽度，其余的列将相应地调整大小。注意，表仍然可以受其包含的块的约束(在您的示例中，它是由结果窗格建立的初始包含块)。

在运行火狐的个人电脑上，.cell-1的计算宽度为33像素。当将其宽度指定为1%时，表的最大宽度为3300像素(33×100 = 3300)。您需要一个非常大的屏幕才能在您的示例中看到这一点，所以为9像素，因此表的最大宽度为900像素。。如果将预览窗格的大小调整为大于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个组件来代替tables。

• display:table 默认情况下，这将获得内容宽度，除非UA样式用width: xx%属性覆盖它。
• display:table-row 该属性本身没有高度，只跟随td的dimesnion，即表单元格。
• display:table-cell 与display:table一样，它也采用其父级.i.e.、table的宽度，并在兄弟姐妹之间按宽度平分。如果您有200 eg宽表，其中有5个单元格(而且没有手动定义宽度)，那么所有的table-cell都将接受相同的px .40px！