JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<div class="mega">
    <table class='header' width="2000">
        <tr><td>HEADER</td><td>HEADER</td><td>HEADER</td><td>HEADER</td></tr>
    </table>
    <table width="2000">
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
        <tr><td>Stuff</td><td>Stuff</td><td>Stuff</td><td>Stuff</td></tr>
    </table>
</div>

CSS

.mega {
    height: 100px;
    margin: 10px;
    overflow: auto;
    background: #eee;
    position:relative;
    
}
.header{position:absolute; background-color:rgb(202, 202, 202);}
.header+* {margin-top:30px;}

JavaScript

$('.mega').on('scroll',function(){$('.header').css('top',$(this).scrollTop());});