CSS tabela - dodać kolumny marginesów a row border-bottom

Question

Mam element tabeli HTML, a ja staram się dodać margines między kolumnami, więc użyłem tych właściwości CSS:

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

teraz chcę dodaj obramowanie-dół do całego wiersza, zarówno w nagłówku, jak i w każdym tr w treści, ale obramowanie nie pojawia się. użyłem:

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

to widoczne tylko, jeśli używam:

table { 
border-collapse: collapse; 
} 

ale wtedy nie będę mieć margines między kolumnami.

Dodałem mój DEMO here.

Answer 1

Można użyć :after pseudo klasy stylów do tego, jak pokazano poniżej:

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>