JSFiddle - React, Tailwind, and code Playground

by Brewal Renault

HTML

<section class='container'>
    <table id="myTable" border="1" class="visible">
        <tr>
            <th>Id</th>
            <th>Post Title</th>
            <th>Date Published</th>
            <th>Column D</th>
            <th>Column E</th>
            <th>Column F</th>
            <th>Column G</th>
            <th>Column H</th>
            <th>Column I</th>
            <th>Column J</th>
            <th>Column K</th>
        </tr>
        <tr>
            <td>Id</td>
            <td>Lorem ipsum dolor sit amet</td>
            <td>Date Published</td>
            <td>Column D</td>
            <td>Column E</td>
            <td>Column F</td>
            <td>Column G</td>
            <td>Column H</td>
            <td>Column I</td>
            <td>Column J</td>
            <td>Column K</td>
        </tr>
        <tr>
            <td>Id</td>
            <td>Post Title</td>
            <td>Date Published</td>
            <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</td>
            <td>Column E</td>
            <td>Column F</td>
            <td>Column G</td>
            <td>Column H</td>
            <td>Column I</td>
            <td>Column J</td>
            <td>Column K</td>
        </tr>
        <tr>
            <td>Id</td>
            <td>Post Title</td>
            <td>Date Published</td>
            <td>Column D</td>
            <td>Column E</td>
            <td>Column F</td>
            <td>Column G</td>
            <td>Column H</td>
            <td>Column I</td>
            <td>Column J</td>
            <td>Column K</td>
        </tr>
        <tr>
            <td>Id</td>
            <td>Post Title</td>
            <td>Date Published</td>
            <td>Column D</td>
            <td>Column E</td>
            <td>Column F</td>
            <td>Column G</td>
            <td>Column H</td>
            <td>Column I</td>
            <td>Column J</td>
            <td>Column K</td>
        </tr>
        <tr>
            <td>Id</td>
           ...

CSS

#myTable tr th, #myTable2 tr th {
    background-color:#F0F0F0;
    border-bottom:1px solid #000;
}
#myTable2 {
    margin-top:20px;
}

#myTable2 tr th {
    background-color:#666;
}

JavaScript

function makeTableHeadersSticky(tableId) {
    
    var thArr = $(tableId + " th");
    var thWidthsArr = [];
    var calcWidth = 0;
    $(tableId + " th").each(function(){
        calcWidth = $(this).css("width");
        thWidthsArr.push(calcWidth);
    });
    
    var pos = $(tableId).offset();
    
    var thTop = pos.top + "px";
    
    var count = 0;
    $(tableId + " tr:first-child > th").each(function(){
        $(this).css("width", thWidthsArr[count]);
        count++;
    });
    count = 0;
    
    $(tableId + " tr:last-child > td").each(function(){
        $(this).css("width", thWidthsArr[count]);
        count++;
    });

    $(window).scroll(function() {

        //var firstRow = $(tableId + " tr:first-child").offset();
        var lastRow = $(tableId + " tr:last-child").offset();
        var w = $(window);
        //console.log("(first,last): ("+(firstRow.top-w.scrollTop())+","+(lastRow.top-w.scrollTop())+")");
        
        if(($(window).scrollTop() > pos.top) && (lastRow.top-w.scrollTop() >= 0)) {
            $(tableId + " tr:first-child").css("position", "fixed");
            $(tableId + " tr:first-child").css("top", "0px");
            $(tableId + " tr:first-child").css("left", "9px");
        } else {                        
            $(tableId + " tr:first-child").css("position", "static");
            $(tableId + " tr:first-child").css("top", thTop);
            
        }
    });

}

makeTableHeadersSticky("#myTable");
makeTableHeadersSticky("#myTable2");