JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Header fixed</h2>
<br/>
<br/>

<table>
    <thead><tr><th>HEADERr</th></tr></thead>
    <tbody>
        <tr><td>1. DATA</td></tr>
        <tr><td>2. DATA</td></tr>
        <tr><td>3. DATA</td></tr>
        <tr><td>4. DATA</td></tr>
        <tr><td>5. DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
        <tr><td>DATA</td></tr>
    </tbody>
</table>

CSS

html, body {
    height:200%;
}

table {
    width:400px;
}

thead {
    background-color:#0c0;
    color:#fff;
}

th {
    text-align:left;
    width:100%;
}

JavaScript

$(function () {
 
    var $thead = $('thead');
    var stickyThead = $thead.offset().top;
    var theadWidth = $thead.width();

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyThead) {
            $thead.css({
                position: 'fixed',
                top: '0px',
                width: theadWidth
            });
        } else {
            $thead.css({
                position: 'static',
                top: '0px'
            });
        }
    });
    
});