JSFiddle - React, Tailwind, and code Playground

by NicosKaralis

HTML

<div>
    <p>With problem
        <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>
                <td></td>
...

CSS

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

/* This only works for tbody */
.unit tr:first-child td:first-child, /* Top left */
.unit tr:first-child td:last-child,  /* Top right */
.unit tr:last-child td:first-child,  /* Bottom left */
.unit tr:last-child td:last-child    /* Bottom right */
{
    background: red;
}

/* This only works for each thead and tfoot block */
.unit tr:first-child th:first-child, /* Top left */
.unit tr:first-child th:last-child,  /* Top right */
.unit tr:last-child th:first-child,  /* Bottom left */
.unit tr:last-child th:last-child    /* Bottom right */
{
    background: yellow;
}

/* just to check which cells are beign selected */
.unit tr:first-child td:first-child, /* Top left */
.unit tr:first-child td:last-child,  /* Top right */
.unit tr:last-child td:first-child,  /* Bottom left */
.unit tr:last-child td:last-child,    /* Bottom right */
.unit tr:first-child th:first-child, /* Top left */
.unit tr:first-child th:last-child,  /* Top right */
.unit tr:last-child th:first-child,  /* Bottom left */
.unit tr:last-child th:last-child {
    opacity: 0.5;
}


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