JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="35%" align="left">header junk left</td>
    <td >- HEADER JUNK MIDDLE -</td>
    <td width="35%" align="right">header junk right</td>
    </tr>
</table>
<br />
<table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="60%" align="left">header junk left</td>
    <td width="40%" align="right">check it out! <input type="checkbox" onchange="alert('your javascript here');" value="Y" name="checkitout"></td>
    </tr>
</table>

<!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->
<table border="1" width="95%" cellspacing="1" cellpadding="0" align="center" id="cTable" >
    <tr>
        <td width="5%">fixed can be long<br>or short</td>
        <td width="9%" colspan="4">scroll A</td>
        <td width="7%" colspan="2">scroll B</td>
        <td width="3%">scroll C</td>
        <td width="9%" colspan="4">scroll D</td>
        <td width="7%" colspan="2">scroll E</td>
        <td width="3%">scroll F</td>
        <td width="9%" colspan="4">scroll G</td>
        <td width="7%" colspan="2">scroll H</td>
        <td width="3%">scroll I</td>
        <td width="9%" colspan="4">scroll J</td>
        <td width="7%" colspan="2">scroll K</td>
        <td width="3%">scroll L</td>
        <td width="9%" colspan="4">scroll M</td>
        <td width="7%" colspan="2">scroll N</td>
        <td width="3%">scroll O</td>
    </tr>
    <tr>
        <td>fixed 2</td>
        <td>1 1 1 1 1 A</td>
        <td>2 2 2 2 2 A</td>
        <td>3 3 3 3 3 A</td>
        <td>4 4 4 4 4 A</td>
        <td>1 B</td>
        <td>2 B</td>
        <td >1 C</td>
        <td>1 D</td>
        <td>2 D</td>
        <td>3 D</td>
        <td>4 D<br>more...</td>
        <td>1 E</td>
        <td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td>
        <td>2 2 G</td>
        <td>3 G</td>
        <td>4 4 4 4 G</td>
        <td>1...

CSS

.cTContainer { overflow: hidden; padding: 2px; }
.cTContainer table { table-layout: fixed; }
.relativeContainer { position: relative; overflow: hidden;}

td { background-color: white; overflow: hidden; padding: 1px; }

.fixedTB { position: absolute; left: 0px; top: 0px; z-index: 11;  }

.leftContainer { position: absolute; left: 0px; top: 0px; overflow: hidden;  }

.rightContainer { position: absolute; left: 0px; top: 0px; overflow: hidden;  }

.leftSBWrapper { position: relative; left: 0px; top: 0px; z-index: 10; }
.topSBWrapper { position: relative; left: 0px; top: 0px; z-index: 10; width: 100%; }

.SBWrapper { width: 100%; height: 140px; overflow: auto; }

JavaScript

$(function() {
$.fn.cTable = function(o) {        
    
    this.wrap('<div class="cTContainer" />');
    this.wrap('<div class="relativeContainer" />');    

    //Update below template as how you have it in orig table
    var origTableTmpl = '<table border="1" cellspacing="1" cellpadding="0" align="center" width="95%" ><tr></tr></table>';
    
    //get row 1 and clone it for creating sub tables
    var row1 = this.find('tr:first').clone(true);
    
    //create table with just r1c1 which is fixed for both scrolls
    var tr1c1 = $(origTableTmpl);
    var row1col1 = row1.find('td:first');;
    tr1c1.find('tr:first').append(row1col1.clone(true));
    tr1c1.wrap('<div class="fixedTB" />');
    tr1c1.parent().prependTo(this.closest('.relativeContainer'));
       
    //create a table with just c1        
    var c1= this.clone(true).prop({'id': ''});
    c1.find('tr:first') //Find first row
      .remove()         //Remove first row
      .end()
      .find('tr')       //Find all other rows
      .each(function (idx) { 
         //Remove all rows except col 1
         $(this).find('td:gt(0)').remove();           
      });
    
    c1.prepend('<tr><td></td></tr>').wrap('<div class="leftSBWrapper" />')
    c1.parent().wrap('<div class="leftContainer" />');
    
    c1.closest('.leftContainer').insertAfter('.fixedTB');
    
    //create table with just row 1 without col 1
    var r1 = $(origTableTmpl);
    r1.find('tr:first').append(row1.find('td:gt(0)').clone(true));     
    r1.wrap('<div class="topSBWrapper" />')
    r1.parent().wrap('<div class="rightContainer" />')  
    r1.closest('.rightContainer').appendTo('.relativeContainer');
    
    $('.relativeContainer').css({'width': 'auto', 'height': o.height});
    
    this.wrap('<div class="SBWrapper"> /')        
    this.parent().appendTo('.rightContainer');    
    this.prop({'width': o.width});    
    
    var tw, th;
    //set width and height of rendered tables
    tw =...