JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<div class="mega">
    <table class='header' width="600">
        <tr><td>HEADER</td><td>HEADER</td><td>HEADER</td><td>HEADER</td></tr>
    </table>
    <table class='dt' width="600">
        <tr><td>Stuffddddddddf</td><td>Stuffdf</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;
    
}
td{border: 1px solid;}
.header{position:absolute; background-color:rgb(202, 202, 202);}
.header+* {margin-top:30px;}

JavaScript

$header = $('.header');
var x = $header.find('td');

$('.mega').on('scroll',function(){$header.css('top',$(this).scrollTop());});
$('.dt tr').eq(0).find('td').each(function(e){ x.eq(e).width($(this).width());});