JSFiddle - React, Tailwind, and code Playground

HTML

<table id="XYZ" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base">
    <thead>
        <tr>
            <th width="50px">Col 1a</th>
            <th width="50px">Col 1b</th>
            <th width="75px">Col 1c</th>
            <th width="100px" style="border-left:medium solid black;" colspan="3"><b>Col 2</th>
            <th width="100px" style="border-left:medium solid black;" colspan="1"><b>Col 3</th>
            <th width="150px" style="border-left:medium solid black;" colspan="5"><b>Col 4<br>
                more<br>
                more</th>
            <th width="100px" style="border-left:medium solid black;" colspan="1"><b>Col 5</th>
        </tr>
        <tr>
            <th colspan="3">Col 1</th>
            <th style="border-left:medium solid black;">A</th>
            <th>B</th>
            <th>C</th>
            <th style="border-left:medium solid black;">1</th>
            <th style="border-left:medium solid black;">4-a</th>
            <th>4-b</th>
            <th>4-c</th>
            <th>4-d</th>
            <th>4-e</th>
            <th style="border-left:medium solid black;">Z</th>
        </tr>
    </thead>
    <tbody>
        <tr class="palegreen">
            <td colspan="3">Col 1<br>
                more</td>
            <td style="border-left:medium solid black;">A
                </th>
            <td>B
                </th>
            <td>C
                </th>
            <td style="border-left:medium solid black;">1
                </th>
            <td style="border-left:medium solid black;">4-a
                </th>
            <td>4-b
                </th>
            <td>4-c
                </th>
            <td>4-d
                </th>
            <td>4-e
                </th>
            <td style="border-left:medium solid black;"><input type="text" NAME="b[1]" size="3">
                </th>
        </tr>
        <tr class="limegreen">
            <td>Col 1a</td>
            <td colspan="2">Col...

CSS

body {
    margin-top: 30px;
}
td,th {
    text-align: center;
    vertical-align: middle;
}
th {
    background-color: DeepSkyBlue;
}
tr:nth-of-type(odd) td {
    background-color: PaleGreen;
}
tr:nth-of-type(even) td {
    background-color: LimeGreen;
}
.sticky-header {
    position: fixed;
    top: 0;
    display: none;
}

JavaScript

$(function(){
    var $window = $(window),
        stickyTable = $('#XYZ'),
        stickyHeader = stickyTable.clone(true),
        tableTop = stickyTable.offset().top,
        isSticky = false;
    
    handleScroll();
    
    $window.on('scroll',handleScroll);
    $window.on('resize',handleResize);
    
    
    stickyHeader.addClass('sticky-header');
    stickyHeader.find('tbody').remove();
    stickyHeader.find('tfoot').remove();
    stickyHeader.appendTo('body');
    
    function handleScroll() {
        var scrollTop = $window.scrollTop();
        
        if(scrollTop > tableTop && !isSticky) {
            stickyHeader.css('left',stickyTable.offset().left+'px').show();
            isSticky = true;
        } else if(scrollTop <= tableTop && isSticky) {
            stickyHeader.hide();
            isSticky = false;
        }
    }
    
    function handleResize() {
        if(isSticky) {
            stickyHeader.css('left',stickyTable.offset().left+'px');
        }
    }
});