Высота обеих таблиц равна 50px, и их содержимое не переполняется. Но таблица с заголовком на самом деле составляет 70 пикселей, потому что заголовок, по-видимому, не включен в вычисление высоты таблицы.

Кто-нибудь может объяснить, почему не следует включать заголовок в расчет высоты стола?

В конце концов, это ребенок стола. И если вы хотите исключить его из высоты таблицы, можете разместить только заголовоквне стол, если вы не хотите, чтобы он был включен.

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