Perché la didascalia della tabella aumenta l'altezza della tabella?

Question

Entrambe le tabelle hanno l'altezza impostata su 50 px e il loro contenuto non è in eccesso. Ma la tabella con una didascalia è in realtà 70px, perché la didascalia non sembra essere inclusa nel calcolo dell'altezza della tabella.

Qualcuno può spiegare il razionale per non aver incluso la didascalia nel calcolo dell'altezza del tavolo?

È un figlio del tavolo, dopo tutto. E se si desidera escluderlo dall'altezza della tabella, è possibile inserire la didascalia al di fuori della tabella se non si desidera che sia inclusa.

.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

Questo è spiegato in 17.4 Tables in the visual formatting model

tabella genera una scatola principale a blocco denominato involucro casella tabella che contiene la scatola tabella stessa e ogni didascalia scatole

Cioè, quando si imposta height: 50px sull'elemento con display: table, si applica alla casella di tabella stessa, che non include la didascalia.

La scatola avvolgitore tabella non includere, quindi la sua altezza è l'altezza della scatola tabella stessa (50px) più l'altezza della voce (20px), cioè, 70px.

Answer 2

Secondo le specifiche, il titolo è in realtà sopra o sotto il contenitore di tabella. Viene quindi rimosso dall'altezza specificata sul tavolo.

17.4.1 Caption position and alignment

Questa proprietà specifica la posizione della casella di didascalia rispetto alla scatola tavolo.

valori hanno i seguenti significati:

all'inizio

Posizioni casella didascalia sopra la casella tavolo.

peggiori

Posizioni casella Didascalia sotto la casella tavolo.

_{Diagram of a table with a caption above it.}

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