在`a`元素中填充出表格單元而不是取出高度

Question

在我的表格中，我有一個a元素。我正在申請padding。但填充去掉cell而不是fetchtable-cell的高度 - 這裏有什麼問題？

這裏的片段：

.table{ 
 
    display:table; 
 
    width:100%; 
 
    clear : both; 
 
    border-top:1px solid gray; 
 
} 
 

 
.column { 
 
    display:table-cell; 
 
    border-bottom:1px solid red; 
 
    height:2em; 
 
    border-right:1px solid gray; 
 
    vertical-align:bottom; 
 
} 
 

 
.table2 a { 
 
    clear:both; 
 
    padding-top:2em; 
 
    background:yellow; 
 
}

<div class="table"> 
 
    <div class="column">Another Table</div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
</div> 
 
<div class="table table2"> 
 
    <div class="column"> 
 
     <a href="#">Testing</a> 
 
    </div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
</div>

幫助嗎？

Answer 1

您需要錨的顯示更改爲block或inline-block

.table{ 
 
    display:table; 
 
    width:100%; 
 
    clear : both; 
 
    border-top:1px solid gray; 
 
} 
 

 
.column { 
 
    display:table-cell; 
 
    border-bottom:1px solid red; 
 
    height:2em; 
 
    border-right:1px solid gray; 
 
    vertical-align:bottom; 
 
} 
 

 
.table2 a { 
 
    clear:both; 
 
    display:block; /*<--- Here*/ 
 
    padding-top:2em; 
 
    background:yellow; 
 
}

<div class="table"> 
 
    <div class="column">Another Table</div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
</div> 
 
<div class="table table2"> 
 
    <div class="column"> 
 
     <a href="#">Testing</a> 
 
    </div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
</div>

Answer 2

您可以在CSS中將overflow:hidden添加到.column類。這應該可以解決你的問題。

.table{ 
 
    display:table; 
 
    width:100%; 
 
    clear : both; 
 
    border-top:1px solid gray; 
 
} 
 

 
.column { 
 
    display:table-cell; 
 
    border-bottom:1px solid red; 
 
    height:2em; 
 
    border-right:1px solid gray; 
 
    vertical-align:bottom; 
 
    overflow:hidden; /* This is added */ 
 
} 
 

 
.table2 a { 
 
    clear:both; 
 
    padding-top:2em; 
 
    background:yellow; 
 
}

<div class="table"> 
 
    <div class="column">Another Table</div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
</div> 
 
<div class="table table2"> 
 
    <div class="column"> 
 
     <a href="#">Testing</a> 
 
    </div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
    <div class="column"></div> 
 
</div>