¿Por qué el subtítulo de la tabla aumenta la altura de la tabla?

Ambas tablas tienen su altura establecida en 50 px y su contenido no se desborda. Pero la tabla con un título es en realidad 70 px, porque el título no parece estar incluido en el cálculo de la altura de la tabla.

¿Alguien puede explicar lo racional para no incluir el título en el cálculo de la altura de la mesa?

Es un hijo de la mesa después de todo. Y si desea excluirlo de la altura de la tabla, podría colocar solo el títulofuera de la mesa si no la quieres incluida.

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

Respuestas a la pregunta(2)

Su respuesta a la pregunta