JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td> first </td>
        <td> second </td>
        <td> third </td>
    </tr>
    <tr class="odd">
        <td> first </td>
        <td> second </td>
        <td> third </td>
    </tr>
    <tr>
        <td> first </td>
        <td> second </td>
        <td> third </td>
    </tr>
    <tr class="odd">
        <td> first </td>
        <td> second </td>
        <td> third </td>
    </tr>
</table>

CSS

table {
    width: 100%;
    margin: 40px;
}
table .odd {
    background: rgba(0,0,0,.1);
}




table tr {
    /*position: relative; /* (REALLY NOT) Needed for pseudo elem */
    display: block; /*Uncomment me and see what happens*/
}

td {
    width: 32.9%; /* ADD THIS */
    display: inline-block; /* AND THIS */
}

table tr:after {
    /*position: absolute; REMOVE THIS TOO */
    top: 0px;
    left: 0px;
    display: block;
    content: '';
    text-indent: -99999px;
    background: red;
    height: 2px;
    /*width: 100%; NOT NEEDED */
}