JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topsection">Fixed header section</div>
<br />
<div id="table-container">
    <table id="maintable">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
                <th>Col 6</th>
                <th>Col 7</th>
                <th>Col 8</th>
                <th>Col 9</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>This is a long column</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>This is a much longer column with lots of information</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            ...

CSS

body {
    margin: 0px;
    background-color: white;
}
table {
    border-spacing: 0px;
}
thead tr {
    background-color: #c0c0c0;
    border: 1px solid black;
}
thead th {
    border: 1px solid black;
    padding-left: 5px;
    padding-right: 5px;
}
tr {
    background-color: #fff;
    border: 1px solid black;
}
table tr:nth-child(even) {
    background-color: #eeeeee;
}
td {
    border: 1px solid black;
    font-family: Arial;
    font-size: 10pt;
    word-wrap: break-word;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
}
tfoot tr {
    background-color: #c0c0c0;
}
#topsection {
    background-color: white;
    position: absolute;
    top: 0;
    margin: 0px;
    height: 130px;
    width: 100%;
    padding: 0px;
}
#table-container {
    background-color: white;
    position: absolute;
    top: 130px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    width: 100%;
}

JavaScript

function moveScroll() {
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;

if (scroll > anchor_top && scroll < anchor_bottom) {
    clone_table = $("#clone");

    if (clone_table.length === 0) {
    clone_table = $("#maintable").clone();
    clone_table.attr({
        id: "clone"
    }).css({
        position: "fixed",
        "pointer-events": "none",
        top: 0
    }).width($("#maintable").width());

$("#table-container").append(clone_table);

$("#clone").width($("#maintable").width());

$("#clone").css({
    border: "none"
});

$("#clone thead").css({
    visibility: "true"
});

$("#clone tbody").css({
    visibility: "hidden"
});

var footEl = $("#clone tfoot");
if (footEl.length) {
footEl.css({
    visibility: "hidden"
});
}
}
} else {
    $("#clone").remove();
}
}

$(window).scroll(moveScroll);