JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="400" cellpadding="1" cellspacing="1">
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
    </tr>
    <tr>
        <td>Table Cell 1-1</td>
        <td>Table Cell 1-2</td>
        <td>Table Cell 1-3</td>
        <td>Table Cell 1-4</td>
    </tr>
    <tr>
        <td>Table Cell 2-1</td>
        <td>Table Cell 2-2</td>
        <td>Table Cell 2-3</td>
        <td>Table Cell 2-4</td>
    </tr>
    <tr>
        <td>Table Cell 3-1</td>
        <td>Table Cell 3-2</td>
        <td>Table Cell 3-3</td>
        <td>Table Cell 3-4</td>
    </tr>
    <tr>
        <td>Table Cell 4-1</td>
        <td>Table Cell 4-2</td>
        <td>Table Cell 4-3</td>
        <td>Table Cell 4-4</td>
    </tr>
</table>
<button class="trigger">Show All</button>

JavaScript

$("th").click(function(){
    var index = $(this).index();
    $(this).hide();
    $("td:nth-child("+(index+1)+")").hide();
});
$(".trigger").click(function(){
    $("td,th").show();
});