JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <colgroup>
        <col style="width:40px" />
        <col style="width:50px" />
        <col class="hide" style="width:60px" />
    </colgroup>
    <tr>
        <th colspan="3" onclick="change()">numbers</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td class="hide">3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td class="hide">3</td>
    </tr>
    <tr>
        <th colspan=3>numbers</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td class="hide">6</td>
    </tr>
</table>

CSS

td {
    border: 1px solid grey;
}
table {
    border: 1px solid black;
    border-collapse:collapse;
    table-layout: fixed;
    width: 30px;
}
tr th {
    background-color: #0caaaa;
}

JavaScript

function change() {
    els = document.getElementsByClassName("hide");
    for (var i = 0; i < els.length; i++)
    els[i].style.display = "none";
}