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; /* Needed for pseudo elem */
    /*display: block; Uncomment me and see what happens*/
}

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