JSFiddle - React, Tailwind, and code Playground

by San-Kai Liao

HTML

<table id="experimental-group" class="table table-bordered table-fixed-thead">
    <caption>實驗組 (Experimental Group)</caption>
    <thead>
        <tr>
            <th width="50%">Name</th>
            <th width="25%">Position</th>
            <th width="25%">Office</th>
        </tr>
    </thead>
    <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>
            <td>Charde Marshall</td>
            <td>Regional Director</td>
           ...

CSS

.table-fixed-thead {
    float: left;
    width: 350px;
    margin: 10px;
}
#experimental-group {
    border: 1px solid red;
}
#control-group {
    border: 1px solid green;
}

JavaScript

// UMD dance - https://github.com/umdjs/umd
!function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
}(this, function ($) {
    'use strict';

    // Default options
    var defaults = {
        "height": "auto"
    };

    //
    var getBrowserScrollSize = function () {
        var box = $("<div></div>").css({
            "position": 'absolute',
            "visibility": 'hidden',
            "width": '100px',
            "height": '100px',
            "overflow": 'scroll'
        }).appendTo("body");
        var bar = {
            "width": box.width() - box[0].clientWidth,
            "height": box.height() - box[0].clientHeight
        };
        box.remove();
        return bar;
    };

    // Constructor, initialise everything you need here
    var Plugin = function (element, options) {
        console.log('opt', options);
        var table = element;
        var tableOW = table.outerWidth();
        var tableOH = table.outerHeight();
        var thead = table.find('thead');
        var theadOH = thead.outerHeight();
        var tbody = table.find('tbody');
        var colWidth = [];
        var scrollbarSize = getBrowserScrollSize();



        // 先收集記錄每個欄位的寬度
        var tbodyCols = tbody.find('> tr:first > td');
        tbodyCols.each(function (i, td) {
            colWidth.push($(td).outerWidth());
            /*
             if (i === tbodyCols.length - 1) {
             console.log(i, 'is last');
             colWidth.push((i) ? $(td).outerWidth() : $(td).outerWidth() + 2);
             } else {
             colWidth.push((i) ? $(td).outerWidth() : $(td).outerWidth() - scrollbarSize.width + 2);
             }
             */
        });

        // 將 thead 顯示方式改為區塊，並設定原 table 的寬度
        thead.css('display', 'block');
        thead.css('width', tableOW);
        thead.css('border-bottom','1px solid #EEE');

        if (options.height ===...