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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With