kurtko kurtko - 6 months ago 13
CSS Question

Add space and border below to row

I have a table and I need rows with space and border below.

Like this:

enter image description here

I tried to fix it with false white borders and a 'spacer row' with black background but I do not get displayed correctly.



table {
border-collapse:collapse;
}
td {
padding:1em 2em;
background-color:#ccc;
border-top:10px solid white;
border-bottom:10px solid white;
border-right:4px solid white;
text-align:center;
vertical-align:middle;
}
tr:first-child td {border-top:0}
td:last-child {border-right:0}

tr.spacer {
height:1px;
background-color:black;
border:1px solid black;
}

<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr class="spacer"></tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr class="spacer"></tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</table>





Any ideas?

Answer

Try using :after to add some dummy content and align it:

td:after {
   content: 'border';
    position: absolute;
    bottom: -5px;
    background: red;
    width: 105%;
    left: 0px;
    text-indent:-9999px;
    height:1px;
}

You'll need to make the <td>'s position:relative.

Check it out - https://jsfiddle.net/2j6jqkx2/1/