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>

</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;
}

#foo td:after {
   content: "";
   position : relative;
   margin   : 0 0 0 -8px;
   display: block; 
   width: 100%;
   height : 3px;  
   padding : 0 8px;
   top : 2px;
   margin-bottom : -6px;
   border-bottom : 3px red solid;
}