JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th>A</th>
        <th class="tc1">B</th>
        <th class="tc1">C</th>
        <th>D</th>
        <th class="tc2">E</th>
        <th class="tc2">F</th>
        <th class="tc2">G</th>
    </tr>
    <tr>
        <td>1</td>
        <td class="tc1">2</td>
        <td class="tc1">3</td>
        <td>4</td>
        <td class="tc2" colspan="3">5-7</td>
    </tr>
    <tr>
        <td>1</td>
        <td class="tc1" colspan="2">2-3</td>
        <td>4</td>
        <td class="tc2">5</td>
        <td class="tc2">6</td>
        <td class="tc2">7</td>
    </tr>
</table>
<button onclick="$('.tc1').toggle();">Toggle Column B-C</button>
<button onclick="$('.tc2').toggle();">Toggle Column E-G</button>

CSS

body {
    font-family: Arial, sans-serif;
    font-size: 12px;    
}
td, th {
    border: 1px solid black;
    padding: 3px;
}