JSFiddle - React, Tailwind, and code Playground

by San-Kai Liao

HTML

<div id="table-thead-fixed-sample">
    <table class="table table-bordered table-thead-fixed">
        <thead>
            <tr>
                <th width="55%">名稱</th>
                <th width="15%">擁有者</th>
                <th width="15%">修改時間</th>
                <th width="15%">檔案大小</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>我是檔案名</td>
                <td>我</td>
                <td>2014-11-12</td>
                <td>353 KB</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

#table-thead-fixed-sample {
}
table.table-thead-fixed thead {
    background-color: #EEE;
}
table.table-thead-fixed tbody {
    height: 100px;
}
table tbody td {
}

JavaScript

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

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;
}
(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

$(document).ready(function () {

    var tableTheadFixed = $('table.table-thead-fixed');
    var scrollbarWidth = getScrollbarWidth();

    var scrollbarWidth = getBrowserScrollSize().width;
    
    var tableWidth = 0;

    tableTheadFixed.find('thead > tr:first > th').each(function (i, th) {
        var thWidth = $(th).outerWidth();
        tableWidth += thWidth;
        if ($(th).is(':last-child')) {
            $(th).removeAttr('width').css('min-width', (thWidth + scrollbarWidth)...