JSFiddle - React, Tailwind, and code Playground

by San-Kai Liao

HTML

<table id="table-1" class="table table-bordered table-fixed-thead">
    <thead>
        <tr>
            <th width="50%">Name</th>
            <th width="25%">Position</th>
            <th width="25%">Office</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
        </tr>
        <tr>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
        </tr>
        <tr>
            <td>Quinn Flynn</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
        </tr>
        <tr>
           ...

CSS

body {
    padding: 50px 0;
}
.table-fixed-thead {
    float: left;
    width: 400px;
    margin: 5px;
}
#table-1 {
    border: 1px solid red;
}
#table-2 {
    border: 1px solid green;
}

JavaScript

$(document).ready(function () {
function getBrowserScrollSize(){

    var css = {
        "border":  "none",
        "height":  "200px",
        "margin":  "0",
        "padding": "0",
        "width":   "200px"
    };

    var inner = $("<div>").css($.extend({}, css));
    var outer = $("<div>").css($.extend({
        "left":       "-1000px",
        "overflow":   "scroll",
        "position":   "absolute",
        "top":        "-1000px"
    }, css)).append(inner).appendTo("body")
    .scrollLeft(1000)
    .scrollTop(1000);

    var scrollSize = {
        "height": (outer.offset().top - inner.offset().top) || 0,
        "width": (outer.offset().left - inner.offset().left) || 0
    };

    outer.remove();
    return scrollSize;
}    
    
    var table = $('#table-1');
    var thead = table.find('thead');
    var tbody = table.find('tbody');
    var tfoot = table.find('tfoot');
    var tableOW = table.outerWidth()
    var tableOH = table.outerHeight();
    var colWidth = [];
    var scrollbarSize = getBrowserScrollSize();
    
    console.log(scrollbarSize);
    table.find('tbody > tr > td').each(function (i, td) {
        colWidth.push((i) ? $(td).outerWidth() :$(td).outerWidth() - scrollbarSize.width +3 );
    });

    thead.css('display', 'block');
    thead.css('width', tableOW);
    
    tbody.css('display', 'block');
    tbody.css('width', tableOW);
    tbody.css('height', '300px');
    tbody.css('overflow-y', 'auto');
    tbody.css('overflow-x', 'hidden');

    tfoot.css('display', 'block');
    tfoot.css('width', tableOW);
    tfoot.css('position', 'absolute');
    tfoot.css('top', (thead.outerHeight() + tfoot.outerHeight()+ table.outerHeight() - scrollbarSize.height)+'px');
    
    for (var index in colWidth) {
        var w = colWidth[index];
        thead.find('tr > th:eq(' + index + ')').outerWidth(w);
        tbody.find('tr > td:eq(' + index + ')').outerWidth(w);
        tfoot.find('tr > th:eq(' + index + ')').outerWidth(w);
    }


   ...