为什么表格标题会增加表格的高度？

Question

两个表的高度都设置为50px，其内容不会溢出。但带有标题的表格实际上是70px，因为表格的高度计算似乎没有包含标题。

任何人都可以解释在计算桌子高度时不包括标题的理由吗？

毕竟，这是桌子上的孩子。如果您想将它从表格高度中排除，可以将表格放在表格中，如果您不想包含它。

＆＃13;

＆＃13;

.table {
  display: table;
  height: 50px;
}
.table-caption {
  display: table-caption;
  background-color: red;
  height: 20px;
}
.table-row {
  display: table-row;
  background-color: green;
}
.table-cell {
  display: table-cell;
}

＆＃13;

<div class="table">
  <div class="table-row">
    <div class="table-cell">table height is 50px</div>
  </div>
</div>

<br>
  
<div class="table">
  <div class="table-caption">caption</div>
  <div class="table-row">
    <div class="table-cell">table height is 70px</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

17.4 Tables in the visual formatting model

中解释了这一点

  

该表生成一个名为表包装器的主块框   框包含表格框本身和任何标题框

也就是说，当您使用height: 50px在元素上设置display: table时，它会应用于表格框本身，但不包括标题。

表格包装盒确实包含它，因此它的高度是表格框本身的高度（50px）加上标题的高度（20px），即{{1} }。

Answer 2

根据规范，标题实际上位于表格框的上方或下方。因此，它将从表格​​中指定的高度移除。

  

17.4.1 Caption position and alignment

     

此属性指定字幕框的位置   到表格框。

     

值具有以下含义：

     

热门

     

将标题框放在表格框上方。

     

<强>底

     

将标题框放在表格框下方。

     

<子> Diagram of a table with a caption above it.

     

     

_{来源：https://www.w3.org/TR/CSS2/tables.html#model}