CSS table - add margin columns and row border-bottom

Question

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

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

Now I want to add border-bottom to whole row, both in the header and in each tr in the body, but the border doesn't appear. I used:

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

it only appear if I'm using:

table {
 border-collapse: collapse;
}

but then I won't have margin between columns.

I added my DEMO here.

Answer 1

You can use :after pseudo class to styles this 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>