JSFiddle - React, Tailwind, and code Playground

by blesh

CSS

/* site styles =================== */
table {
    margin: 200px;
    border-collapse: collapse;   
}

td {
 border: 1px solid gray;   
    white-space: nowrap;
}
tr td:first-child {
 background: gainsboro;   
}

table thead td {
 background: pink;   
}

table thead td:first-child {
    background: none;
}

JavaScript

/* TABLE HEADER LOCKING */

(function() {
    var table = $('<table/>').appendTo('body'),
        thead = $('<thead/>').appendTo(table),
        tbody = $('<tbody/>').appendTo(table),
        tr = $('<tr/>').appendTo(thead),
        headComplete = false;

    for (var r = 0; r < 100; r++) {
        if (headComplete) tr = $('<tr/>').appendTo(tbody);
        for (var c = 0; c < 100; c++) {
            $('<td/>').text(r + '-' + c).appendTo(tr);
            headComplete = true;
        }
    }
})();

//isOffScreen ----------------------------
(function($, doc) {
    $.fn.isOffScreen = function() {
        var selfOff = $(this).offset(),
            selfW = $(this).width(),
            selfH = $(this).height(),
            docX = $(doc).scrollLeft(),
            docY = $(doc).scrollTop(),
            docW = $(doc).width(),
            docH = $(doc).height();
        var result = '';
        if (selfOff.top + selfH < docY) {
            result += 'top';
        }
        if (selfOff.top > docY + docH) {
            result += 'bottom';
        }
        if (selfOff.left + selfW < docX) {
            result += 'left';
        }
        if (selfOff.left > docX + docW) {
            result += 'right';
        }
        return result;
    };
})(jQuery, document);



//locking -------------------------------
(function($, doc) {

    function buildLockHeader(table) {
        var lockHeader = $('<div class="table-lock table-lock-header"/>').appendTo('body');
        var tableOffset = $(table).offset();

        var firstRow = $(table).find('tr:first');
        lockHeader.css({
            position: 'fixed',
            display: 'inline-block',
            top: 0,
            bottom: 'auto',
            left: tableOffset.left + $(doc).scrollLeft() + 'px',
            right: 'auto',
            width: 'auto',
            height: firstRow.height() + 'px'
        });

        var tableCopy = $(table).clone();
        lockHeader.append(tableCopy);

        tableCopy.css({
         ...