JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table-1">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>infoooooooo</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>
<table id="header-fixed"></table>

CSS

body { height: 1000px; }
#header-fixed { 
    position: fixed; 
    top: 0px; display:none;
    background-color:white;
}
#table-1 th{padding:4px 8px}

JavaScript

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead");
var $fixedHeader = $("#header-fixed").append($header.clone());

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();
    
    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
        
        $.each($header.find('tr > th'), function(ind,val){
          var original_width = $(val).width();
          var original_padding = $(val).css("padding");
          $($fixedHeader.find('tr > th')[ind])
          .width(original_width)
          .css("padding",original_padding);
        });
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});