JSFiddle - React, Tailwind, and code Playground

HTML

<table id="my-table">
    <tbody>
        <tr><td>my-table 1</td></tr>
        <tr><td>my-table 2</td></tr>
        <tr><td>my-table 3</td></tr>
        <tr><td>my-table 4</td></tr>
        <tr>
            <td>
                <table id="inner-table">
                    <tbody>
                        <tr><td>inner-table 1</td></tr>
                        <tr><td>inner-table 2</td></tr>
                        <tr><td>inner-table 3</td></tr>
                        <tr><td>inner-table 4</td></tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr><td>my-table 6</td></tr>
        <tr><td>my-table 7</td></tr>
        <tr><td>my-table 8</td></tr>
    </tbody>
</table>

CSS

#my-table { width: 200px }
#inner-table { width: 100%; }

#my-table > tbody > tr:nth-child(even) {
    background-color: #ddd;
}

#inner-table > tbody > tr:nth-child(even) {
    background-color: #bbb;
}