CSS table - adding marker columns and bottom line border

Question

I have an HTML table element and I'm trying to add a marker between the columns, so I used these css properties:

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

Now I want to add border-bottom to the whole line, both in the header and in each tr in the body, but the border is not displayed. I used:

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

it appears only if I use:

 table { border-collapse: collapse; } 

but then I will not have a margin between the columns.

I added here DEMO here .

Answer 1

You can use the :after pseudo class for styles, as shown below:

 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>