JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<table>
  <thead>
    <tr>
      <th colspan="2">Header</th>
      <th colspan="2">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

CSS

table {border: 1px solid;}
td, th {
    border: 1px solid;
    width: 75px;
}
th {height: 40px;}
td {height: 75px;}

JavaScript

$("table").each(function(){
  var maxCell = 0;
  $(this).find("th").prop("colspan", function(i,v){
    maxCell += v;
  });
  $('tr').find("td:gt("+(maxCell-1)+")").remove();
});