JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<br/>
<table id="listTable" width="100%" border="0" cellpadding="0" cellspacing="1" class="table table-condensed table-bordered table-striped" style="margin-bottom: 0px; padding: 0px;">
    <thead id="dataTableHeaderDiv" style="background-color: #FFFFFF" class="tableFloatingHeaderOriginal">
        <tr>
            <th class="listColumnHeader" width="40px" align="center" nowrap="">
                <input type="checkbox" id="chkAll" name="chkAll" onclick="fnCheckAll(this.checked);">
            </th>
            <th class="listColumnHeaderForSortable" style="cursor:hand" onclick="fnSort('Entity', 'asc');" nowrap="">Entity
                <div style="width:10px; display:inline-block">&nbsp;</div>
            </th>
            <th class="listColumnHeaderForSortable" style="cursor:hand" onclick="fnSort('Entity value', 'asc');" nowrap="">Entity value
                <div style="width:10px; display:inline-block">&nbsp;</div>
            </th>
            <th class="listColumnHeaderForSortable" style="cursor:hand" onclick="fnSort('Obligation name', 'asc');" nowrap="">Obligation name
                <div style="width:10px; display:inline-block">&nbsp;</div>
            </th>
            <th class="listColumnHeaderForSortable" style="cursor:hand" onclick="fnSort('Entity overrides', 'asc');" nowrap="">Entity overrides
                <div style="width:10px; display:inline-block">&nbsp;</div>
            </th>
            <th class="listColumnHeaderForSortable" width="99%" style="cursor:hand" onclick="fnSort('Output format', 'asc');" nowrap="">Output format
                <img border="0" style="cursor:hand" src="/VermilionWeb/images/sort_descending.gif">
            </th>
        </tr>
    </thead>
    <thead id="dataTableHeaderDiv" style="display: none; background-color: rgb(255, 255, 255);" class="tableFloatingHeader"></thead>
    <tbody id="dataTableBodyDiv" style="overflow:auto; background-color: #FFFFFF">
        <tr>
            <td id="dataRowTd_364" class="listRow"...

CSS

thead {
    background-color:#fff;
}

JavaScript

$(function () {
    $("table").stickyTableHeaders();
});

(function ($, window, undefined) {
    'use strict';

    var name = 'stickyTableHeaders',
        id = 0,
        defaults = {
            fixedOffset: 0,
            leftOffset: 0,
            marginTop: 0,
            scrollableArea: window
        };

    function Plugin(el, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        base.id = id++;
        base.$window = $(iframe);
        base.$document = $(document);

        // Listen for destroyed, call teardown
        base.$el.bind('destroyed',
        $.proxy(base.teardown, base));

        // Cache DOM refs for performance reasons
        base.$clonedHeader = null;
        base.$originalHeader = null;

        // Keep track of state
        base.isSticky = false;
        base.hasBeenSticky = false;
        base.leftOffset = null;
        base.topOffset = null;

        base.init = function () {
            base.$el.each(function () {
                var $this = $(this);

                // remove padding on <table> to fix issue #7
                $this.css('padding', 0);

                base.$originalHeader = $('thead:first', this);
                base.$clonedHeader = base.$originalHeader.clone();
                $this.trigger('clonedHeader.' + name, [base.$clonedHeader]);

                base.$clonedHeader.addClass('tableFloatingHeader');
                base.$clonedHeader.css('display', 'none');

                base.$originalHeader.addClass('tableFloatingHeaderOriginal');

                base.$originalHeader.after(base.$clonedHeader);

                base.$printStyle = $('<style type="text/css" media="print">' +
                    '.tableFloatingHeader{display:none !important;}' +
                   ...