两个表的高度都设置为50px,并且其内容没有溢出。但是带标题的表格实际上是70px,因为标题似乎未包含在表格的高度计算中。
任何人都可以解释在计算 table 高度时不包括标题的合理性吗?
毕竟这是 table 上的 child 。而且,如果您想将其从 table 的高度中排除,则可以将标题仅放在 table 之外,如果您不希望将其包括在内。
.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>
最佳答案
17.4 Tables in the visual formatting model中对此进行了解释
也就是说,当您使用height: 50px
在元素上设置display: table
时,它适用于表格框本身,其中不包括标题。
表格包装盒确实包含它,因此它的高度是表格盒本身的高度(50px
)加上标题的高度(20px
),即70px
。