CSS表 - 增加利潤率列和行底部邊框

Question

我有一個HTML表元素和我想要在列之間增加保證金，所以我使用的CSS屬性：

table { 
border-collapse: separate; 
border-spacing: 36px 0px; 
} 

現在我想將邊框底部添加到整行，無論是在標題中還是在正文中的每個tr中，但邊框都不會出現。 我用：

tr { 
border-bottom: 1px solid blue; 
} 

它只有當我使用出現：

table { 
border-collapse: collapse; 
} 

但我不會有列之間的保證金。我加了DEMO here。

Answer 1

您可以使用:after僞類樣式此，如下圖所示：

body { 
 
    background: #eee; 
 
} 
 

 
.mytable{ 
 
    border-collapse: separate; 
 
    background-color: white; 
 
    border-spacing: 36px 0px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.mytable td, 
 
.mytable th { 
 
    border-left: 1px solid black; 
 
    border-right: 1px solid black; 
 
} 
 

 
.mytable th:after, 
 
.mytable td:after { 
 
    position: absolute; 
 
    background: blue; 
 
    margin-top: 18px; 
 
    content: ''; 
 
    height: 1px; 
 
    right: 0; 
 
    left: 0; 
 
}

<table class="mytable"> 
 
    <thead> 
 
    <tr> 
 
     <th>aaa</th> 
 
     <th>bbb</th> 
 
     <th>ccc</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>ddd</td> 
 
     <td>eee</td> 
 
     <td>fff</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ggg</td> 
 
     <td>hhh</td> 
 
     <td>iii</td> 
 
    </tr> 
 
    </tbody> 
 
</table>