JSFiddle - React, Tailwind, and code Playground

HTML

<table id="A" border="0" width="95%" cellspacing="0" cellpadding="0" align="center" class="base">
    <tr bgcolor="gray">
        <td>
            <br /><br /><br />
            need the blue column heading rows to remain fixed, and scroll the green rows:<br />
            <table id="XYZ" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base">
                <thead>
                    <tr>
                        <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1a</th>
                        <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1b</th>
                        <th width="75px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1c</th>
                        <th width="100px" style="border-left:medium solid black;" colspan="3" bgcolor="DeepSkyBlue" align="center" valign="middle"><b />Col 2</th>
                        <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b />Col 3</th>
                        <th width="150px" style="border-left:medium solid black;" colspan="5" bgcolor="DeepSkyBlue" align="center" valign="middle"><b />Col 4<br />more<br />more</th>
                        <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b />Col 5</th>
                    </tr>
                    <tr>
                        <th bgcolor="DeepSkyBlue" colspan="3" align="center" valign="middle">Col 1</th>
                        <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">A</th>
                        <th bgcolor="DeepSkyBlue" align="center" valign="middle">B</th>
                        <th bgcolor="DeepSkyBlue" align="center" valign="middle">C</th>
                        <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">1</th>
             ...

CSS

.fTable_rContainer {
    position: relative;
    overflow: auto;
}

.fTable_fixedHead {
    position: fixed;;    
}

JavaScript

$(function() {
    (function($) {
        $.fn.fTable = function(o) {
           
            var tableTmpl = '<table id="XYZ_fixed" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base"></table>';
            
            this.wrap('<div class="fTable_container" />');
            var fc = this.parent();
            fc.css('width', this.width() + 18);
            
            this.wrap('<div class="fTable_rContainer" />');
            var rc = this.parent();
            rc.css('height', o.height);

            $(tableTmpl)
             .addClass('fTable_fixedHead')
             .html(this.find('thead').clone())
             .prependTo(rc);
        };
        
    })(jQuery);

    $('#XYZ').fTable({
        height: 300
    });
});