這兩個表的高度都設置爲50px,並且其內容不會溢出。但帶有標題的表格實際上是70px,因爲標題似乎未包含在表格的高度計算中。爲什麼表格標題增加了表格的高度?
任何人都可以解釋在表格高度計算中不包括標題的理性嗎?
這畢竟是桌上的孩子。如果你想從表格高度中排除它,如果你不希望它包括在內,可以在之外放置標題。
.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>