JSFiddle - React, Tailwind, and code Playground

by boneskull

HTML

<table>
    <caption>bug</caption>
    <tr>
        <td colspan="2">nest</td>
    </tr>
    <tr>
        <td>total</td>
        <td>foo</td>
        <td>bar</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<hr>
<table>
    <caption>fix case 1</caption>
    <tr>
        <td>
            <!-- we add an extra td at the beginning -->
        </td>
        <td colspan="2">nest</td>
    </tr>
    <tr>
        <td>total</td>
        <td>foo</td>
        <td>bar</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<hr>
<table>
    <caption>fix case 2</caption>
    <tr>
        <td>
            <!-- we add an extra td at the beginning -->
        </td>
        <td>total <!-- sometimes this is here --></td>
        <td colspan="2">nest</td>
    </tr>
    <tr>
        <td>total</td>
        <td>foo</td>
        <td>bar</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<hr>

CSS

/* the fix */
tr:first-child td:first-child + td:not([colspan]) {
    display: none;
}


/* ignore this bullshit */
table {
    color: blue;
    border-spacing: 0;
    border-collapse: collapse
}
td {
    padding: 4px;
    border: 1px solid black;
}
caption {
    color: black;
    font-weight: bold;
}
tr:nth-child(2) {
    color: green;
}
tr:nth-child(3) {
    color: red;
}