JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
            <th>col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>val 1</td>
            <td>val 2</td>
            <td>val 3</td>
        </tr>
        <tr class="hidden">
            <td colspan="3">hidden value</td>
        </tr>
        <tr>
            <td>val 1</td>
            <td>val 2</td>
            <td>val 3</td>
        </tr>
        <tr class="hidden">
            <td colspan="3">hidden value</td>
        </tr>
        <tr>
            <td>val 1</td>
            <td>val 2</td>
            <td>val 3</td>
        </tr>
        <tr class="hidden">
            <td colspan="3">hidden value</td>
        </tr>
        <tr>
            <td>val 1</td>
            <td>val 2</td>
            <td>val 3</td>
        </tr>
        <tr class="hidden">
            <td colspan="3">hidden value</td>
        </tr>
        <tr>
            <td>val 1</td>
            <td>val 2</td>
            <td>val 3</td>
        </tr>
        <tr class="hidden">
            <td colspan="3">hidden value</td>
        </tr>
        <tr>
            <td>val 1</td>
            <td>val 2</td>
            <td>val 3</td>
        </tr>
        <tr class="hidden">
            <td colspan="3">hidden value</td>
        </tr>
        <tr>
            <td>val 1</td>
            <td>val 2</td>
            <td>val 3</td>
        </tr>
        <tr class="hidden">
            <td colspan="3">hidden value</td>
        </tr>
        <tr>
            <td>val 1</td>
            <td>val 2</td>
            <td>val 3</td>
        </tr>
        <tr class="hidden">
            <td colspan="3">hidden value</td>
        </tr>
    </tbody>
</table>

CSS

.hidden { display: none; }
table { border-collapse: collapse; width: 300px; }
th { background-color: red; color: #fff; }

tr:nth-child(4n - 1) { background-color: grey; }