2016-02-21 30 views
5

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>

Trả lời

5

Đó là giải thích trong 17.4 Tables in the visual formatting model

bàn tạo ra một hộp khối chính gọi là bảng wrapper hộp có chứa các bảng hộp riêng của mình và bất kỳ chú thích hộp

Tức là, khi bạn đặt height: 50px trên phần tử với display: table, nó sẽ áp dụng cho chính hộp bảng, không bao gồm chú thích.

Hộp trình bao bọc bảng không bao gồm nó, do đó chiều cao của nó là chiều cao của chính hộp bảng (50px) cộng với chiều cao của chú thích (20px), nghĩa là, 70px.

enter image description here

5

Theo spec, chú thích là thực sự ở trên hoặc bên dưới hộp bảng. Do đó, nó được lấy ra khỏi chiều cao được chỉ định trên bảng.

17.4.1 Caption position and alignment

Thuộc tính này xác định vị trí của hộp chú thích tôn trọng vào hộp bảng với.

giá trị có ý nghĩa như sau:

đầu

Positions chú thích hộp phía trên hộp bảng.

đáy

Positions chú thích vào ô bên dưới hộp bảng.

Diagram of a table with a caption above it.

enter image description here

nguồn: https://www.w3.org/TR/CSS2/tables.html#model

Các vấn đề liên quan