JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>
      
      <td...

CSS

table,
th,
td {
  border: 1px solid black;
}

JavaScript

jQuery($ => {
  let $headings = $('.heading');
  var prevData = [];
    if(localStorage.getItem('prevData')){
    var prevData = JSON.parse(localStorage.getItem('prevData'));
    if(prevData && prevData.length>0){
    prevData.forEach((e)=>{
        if(prevData.includes(e)){
      let $el = $('.col' + e).toggle();
    let colspan = $('table tbody tr:first > td:visible').length / $headings.length +1;
    $headings.prop('colspan', colspan);
      }
        
    })
    }
  }
  $('.hide').on('click', e => {
    let $el = $('.col' + e.target.dataset.targetIndex).toggle();
    if(!(prevData && prevData.length>=0)){
        prevData=[];
    }
    var prevIndex = prevData.indexOf(e.target.dataset.targetIndex);
    if(prevIndex>=0){
    prevData.splice(prevIndex, 1);
    }else{
    prevData.push(e.target.dataset.targetIndex);
    }
    
    localStorage.setItem('prevData', JSON.stringify(prevData));
    let colspan = $('table tbody tr:first > td:visible').length / $headings.length +1;
    $headings.prop('colspan', colspan);
      
});
});