为什么table-caption会增加表的高度？ [英] Why does table-caption increase the height of the table?

问题描述

这两个表的高度都设置为50px，它们的内容不会溢出。但是带有标题的表格实际上是70像素，因为标题似乎未包含在表格的高度计算中。

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

这是一个表的孩子毕竟。如果您要将其从表格高度中排除，只要不希望将其包含在表格之外即可将之外的标题放置在之外。

  .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;}  

 < div class =table> < div class =table-row> < div class =table-cell>表格高度为50像素< / div> < / div>< / div>< br> < div class =table> < div class =table-caption> caption< / div> < div class =table-row> < div class =table-cell>表高为70px< / div> < / div>< / div>  

解决方案

这在

Both tables have their height set to 50px and their content is not overflowing. But the table with a caption is actually 70px, because the caption does not appear to be included in the table's height calculation.

Can anyone explain the rational for not including the caption in the calculation of the table height?

It's a child of the table after all. And if you wanted to exclude it from the table height, could place just the caption outside the table if you didn't want it included.

.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;
}

<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>

解决方案

That's explained in 17.4 Tables in the visual formatting model

the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes

That is, when you set height: 50px on the element with display: table, it applies to the the table box itself, which does not include the caption.

The table wrapper box does include it, therefore its height is the height of the table box itself (50px) plus the height of the caption (20px), that is, 70px.

这篇关于为什么table-caption会增加表的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！