JSFiddle - React, Tailwind, and code Playground

by fcalderan

HTML

<table>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
    <tr id="foo"><td>The border of these cells</td><td>is not uniformly red!</td></tr>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
</table>

CSS

body { margin: 1em; }

table {  border-spacing: 0;
    border-left: 3px black solid;
    border-bottom : 3px black solid;
}

td { padding: 5px; 
    border-right: 3px black solid; 
    border-top : 3px black solid;
}

#foo td { border-color:red; }

#foo + tr td {  border-top: 3px red solid;  }
#foo td:first-child:before { 
    content: ""; 
    position : relative;
    margin-left : -8px;
    padding : 8px 0 8px 5px;
    border-left : 3px red solid;
}