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>