Cả hai bảng có chiều cao được đặt là 50px và nội dung của chúng không bị tràn. Nhưng bảng có chú thích thực sự là 70px, vì chú thích dường như không được đưa vào tính toán chiều cao của bảng.Tại sao chú thích bảng tăng chiều cao của bảng?
Bất kỳ ai có thể giải thích hợp lý vì không bao gồm chú thích trong việc tính chiều cao bảng?
Đó là con của bảng. Và nếu bạn muốn loại trừ nó khỏi chiều cao của bảng, chỉ có thể đặt chú thích bên ngoài bảng nếu bạn không muốn nó bao gồm.
.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>