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: none;
    border-collapse: separate;
    border-spacing: 0px;
    width: 100%;
    /*
	 table-layout: auto;
	 overflow: hidden;
	 margin-left: 1%;
	 margin-right: 1%;
	 */
}
table tr th, table tr td {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
}
table tr th:first-child, table tr td:first-child {
    border-left: 1px solid #000;
}
table tr th {
    background: #c0c0c0;
    border-top: 1px solid #000;
    text-align: center;
}
table tr:first-child th:first-child {
    border-top-left-radius: 6px;
}
table tr:first-child th:last-child {
    border-top-right-radius: 6px;
}
table tfoot tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}
table tfoot tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}
thead tr {
    white-space: nowrap;
}
table tr:nth-child(even) {
    background-color: #eeeeee;
}
td {
    font-family: Arial;
    font-size: 10pt;
    word-wrap: break-word;
    text-align: center;
}
thead {
    background: #fff;
}
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 = $('#table-container').offset().top;
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",
    left: $("#maintable").offset().left + 'px',
	top: 130
}).width($("#maintable").width());

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

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

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

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

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

$('#table-container').scroll(moveScroll);