JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<table border="1" cellspacing="0" width="100%" cellpadding="0" id="myTable">
   <thead>
       <tr>
        <th>Col1</th>
         <th>Col2</th>
         <th>Col3</th>
         <th>Col4</th>
         <th>Col5</th>
    </tr>
    </thead>
    <tbody>
     <tr>
        <td>Col1</td>
         <td>Col2</td>
         <td>Col3</td>
         <td>Col4</td>
         <td>Col5</td>
    </tr>
     <tr>
        <td>Col1</td>
         <td>Col2</td>
         <td>Col3</td>
         <td>Col4</td>
         <td>Col5</td>
    </tr>
     <tr>
        <td>Col1</td>
         <td>Col2</td>
         <td>Col3</td>
         <td>Col4</td>
         <td>Col5</td>
    </tr>
     <tr>
        <td>Col1</td>
         <td>Col2</td>
         <td>Col3</td>
         <td>Col4</td>
         <td>Col5</td>
    </tr>
    </tbody>
</table>

JavaScript

$("#myTable thead").prepend("<tr></tr>");

$("#myTable thead tr:nth-child(2)").children().each(function(index) {
   var thisHeader = $(this).text();
    
    if(index < 3) {
        $(this).hide();
        $("#myTable thead tr:nth-child(1)").append("<th rowspan='2'>"+thisHeader+"</th>");
    }
});

var index = $('#myTable tbody tr:first').children().length;

        $("#myTable thead tr:nth-child(1)").append("<th colspan='"+ (index-3) +"'>gggg</th>");

 var index1 = $("th").index($("table#myTable thead tr:nth-child(1)").children(":contains('Col3')"));
var index4 = $("th").index($("table#myTable thead tr:nth-child(1)").children(":last"));
              $.each($("table#myTable tr"), function() {
                   $(this).children(":eq(" + index1 + ")").insertAfter($(this).children(":eq(" + index4 + ")"));

                                    });