在`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>