Por que a legenda da tabela aumenta a altura da tabela?
Ambas as tabelas têm altura definida para 50 px e seu conteúdo não está excedendo. Mas a tabela com legenda é na verdade 70 px, porque a legenda não parece ser incluída no cálculo de altura da tabela.
Alguém pode explicar o racional para não incluir a legenda no cálculo da altura da tabela?
Afinal, é um filho da mesa. E se você quiser excluí-lo da altura da tabela, coloque apenas a legendalado de fora a mesa se você não a quisesse incluída.
.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>