Warum erhöht die Tabellenüberschrift die Höhe der Tabelle?

ei beiden Tabellen ist die Höhe auf 50px festgelegt und der Inhalt ist nicht überfüllt. Die Tabelle mit einer Beschriftung hat jedoch tatsächlich eine Größe von 70 Pixel, da die Beschriftung anscheinend nicht in die Höhenberechnung der Tabelle einbezogen wird.

Kann jemand erklären, warum die Beschriftung nicht in die Berechnung der Tischhöhe einbezogen wurde?

Es ist doch ein Kind des Tisches. Und wenn du es von der Tabellenhöhe ausschließen willst, könntest du einfach die Beschriftung platzierendrauße die Tabelle, wenn Sie nicht möchten, dass sie enthalten ist.

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

Antworten auf die Frage(4)

Ihre Antwort auf die Frage