CSS tablo - marj sütunlar ekleyebilir ve satır border-bottom

Question

Ben bir HTML tablosu elemanı var ve sütunlar arasındaki marj eklemek çalışıyorum, bu yüzden o css özelliklerini kullandı:

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

Şimdi şunu sormak istiyorum üst satırda, hem üstbilgide hem de gövdede her bir satırda sınır çizgisini ekleyin, ancak kenarlık görünmez. kullandığım:

table { 
border-collapse: collapse; 
} 

ama sonra sütunlar arasındaki marj olmaz:

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

kullanıyorum eğer sadece görünür.

DEMO here ekledim. aşağıda gösterildiği gibi

Answer 1

Sen stillerine bu :after sözde sınıfını kullanabilirsiniz:

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>