Why does a table signature increase the height of the table?

Question

Both tables have a height of 50 pixels, and their contents do not overflow. But the table with the inscription is actually 70 pixels, because the title is not included in the calculation of the height of the table.

Can someone explain the rational lack of including a header in calculating table height?

This is the child from the table after all. And if you want to exclude it from the height of the table, you can only place the title outside the table, if you do not want it to be included.

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

Answer 1

This is explained in 17.4 Tables in the visual formatting model.

the table generates the main block block, called the table shell, which contains the table itself and any windows with the inscription

That is, when you set height: 50px in an element with display: table , it applies to the table box itself, which does not include the signature.

There is it in the table shell field, so its height is the height of the table window itself ( 50px ) plus the height of the inscription ( 20px ), i.e. 70px .

Answer 2

According to the specification, the signature is actually above or below the table field. Therefore, it is removed from the height indicated in the table.

17.4.1 Label Position and Alignment

This property determines the position of the field with the inscription given in the table field.

Values ​​have the following meanings:

upper

Puts the caption above the table field.

lower

Places an inscription under the table field.

_{A chart diagram with an inscription above it.}

_{source: https://www.w3.org/TR/CSS2/tables.html#model}