2016-02-21 86 views
5

這兩個表的高度都設置爲50px,並且其內容不會溢出。但帶有標題的表格實際上是70px,因爲標題似乎未包含在表格的高度計算中。爲什麼表格標題增加了表格的高度?

任何人都可以解釋在表格高度計算中不包括標題的理性嗎?

這畢竟是桌上的孩子。如果你想從表格高度中排除它,如果你不希望它包括在內,可以在之外放置標題

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

回答

5

這是在17.4 Tables in the visual formatting model

表解釋產生一個塊框稱爲表包裝 箱包含表框本身和任何字幕箱

也就是說,當您在display: table的元素上設置height: 50px時,它適用於表格框本身,其中不包括標題。

表包裝盒確實包括它,因此其高度是表框自身的高度(50px)加上標題的高度(20px),即70px

enter image description here