JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <table id="main_table" align="center" border='1' >
    <thead>
        <tr>
            <th>Column 0</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
                        <th>Column 0</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
                        <th>Column 0</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
                        <th>Column 0</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
                        <th>Column 0</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
                        <th>Column 0</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
       ...

CSS

thead tr { background-color: lightgrey; }
#table_container { position:relative; }

JavaScript

$(function(){
function moveScroll() {
    var scroll = $(window).scrollTop();
    var anchor_top = $("#main_table").offset().top;
    var anchor_left = $("#main_table").offset().left;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll > anchor_top && scroll < anchor_bottom) {
        if ($("#clone").length == 0) {
           $("#main_table")
                .clone()
                .attr('id', 'clone')
                .css({
                    width: $("#main_table").width()+"px",
                    position: 'absolute',
                    pointerEvents: 'none',
                    left: (anchor_left - 8)+'px',
                    top: (scroll - anchor_top - 3)+'px',
                    visibility: 'hidden'
                })
                .appendTo($("#table_container"))
                .find("thead").css({
                    visibility: 'visible'
                });
        } else {
                $("#clone").css({
                    left: (anchor_left - 8)+'px',
                    top: (scroll - anchor_top - 3)+'px',
                })
        }
    }
    else {
        $("#clone").remove();
    }
}
$("#main_table")
    .wrap('<div id="table_container"></div>')
    .after('<div id="bottom_anchor"></div>');
$(window).scroll(moveScroll);
})