JSFiddle - React, Tailwind, and code Playground

by David Thomas

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

td::before,
td::after {
    height: 0;
    display: block;
    content: '';
}

tr:hover td::before,
tr:hover td::after {
    height: 1em;
}