JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>With no problem now
        <br/>thead + tbody + tfoot</p>
    <table class="unit">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
    </table>
</div>
<div>
    <p>
        No problem
        <br/>Only tbody
    </p>
    <table class="unit">
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>
<div>
    <p>What i expected:</p>
    <table class="expected">
        <thead>
            <tr>
                <th class="r"></th>
                <th></th>
                <th class="r"></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
               ...

CSS

div {
    float: left;
    margin: 20px;
}
.unit td, .unit th, .expected td, .expected th {
    width: 10px;
    height: 10px;
    background: blue;
}

/* This works for everything */
.unit > :first-child > :first-child > :first-child, /* Top left */
.unit > :first-child > :first-child > :last-child,  /* Top right */
.unit > :last-child > :last-child > :first-child,  /* Bottom left */
.unit > :last-child > :last-child > :last-child    /* Bottom right */
{
    background: red;
}


.expected .r {
    opacity: 0.5;
    background: red;
}