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

td{
    border-bottom: 2px solid red;
}
tr:hover td{
    padding: 0.25em 0;
    font-family: sans-serif;
}