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_container {
}

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

.fTable_fixedHead {
    position: absolute;    
}

JavaScript

$(function() {
    (function($) {
        $.fn.fTable = function(o) {
            var el = this[0],
                arr = [],
                it;
            for (var i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {
                it = attrs.item(i);

                if (it.nodeName == 'id') {
                    arr.push(it.nodeName + '="' + it.nodeValue + '_fixed"');
                } else {
                    arr.push(it.nodeName + '="' + it.nodeValue + '"');
                }

            }

            var tableTmpl = '<table ' + arr.join(' ') + '></table>';

            this.wrap('<div class="fTable_container" />');
            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);


            rc.scroll(function() {
                rc.find('.fTable_fixedHead').css('top', $(this).scrollTop());
            });

            var _that = this;
            rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);

            $(window).resize(function() {
                rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);
            });
        };

        jQuery.fn.aPosition = function() {
            thisLeft = this.offset().left;
            thisTop = this.offset().top;
            thisParent = this.parent();
            parentLeft = thisParent.offset().left;
            parentTop = thisParent.offset().top;
            return {
                left: thisLeft - parentLeft,
                top: thisTop - parentTop
            }
        }
    })(jQuery);

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