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="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

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

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

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

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

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

     ...

CSS

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

JavaScript

jQuery($ => {
  let $headings = $('.heading');

  $('.hide').on('click', e => {
    let $el = $('.col' + e.target.dataset.targetIndex).toggle();
    let colspan = $('table tbody tr:first > td:visible').length / $headings.length;
    $headings.prop('colspan', colspan);
      
});
});