前端：固定表格（table)表頭的實現方式

  在寫插件 bootstrap table 的時候，當數據過多的時候，須要對錶格的   thead 進行固定，而後滾動表格的 tbody 。可是在實際的操做上，花了不少的時間在這個問題上，到如今也沒有找到完美的解決方案，在這裏記錄下這個問題。

方案一(<=1.0.6)

最開始的解決方法是經過設置th中的div的 position爲absolute，從而達到固定表頭的效果：

<thead>
    <tr>
        <th>
            <div class="th-inner" style="position: absolute; width: 197px;">
                Item ID
            </div>
        </th>
        <th>
            <div class="th-inner" style="position: absolute; width: 346px;">
                Item Name
            </div>
        </th>
        <th>
            <div class="th-inner" style="position: absolute; width: 255px;">
                Item Price
            </div>
        </th>
    </tr>
</thead>

這裏的width，是須要經過對tbody的第一行元素的寬度進行計算出來的。

這個方法雖然可行，可是會出現如： https://github.com/wenzhixin/bootstrap-table/issues/34 這個問題所描述的當表頭文字過長，而表格內容太短，就會顯示 ... 的問題，顯然這種方法是存在很大的問題的。

方案二(<=1.1.2)

參考了不少方法，方案二使用 jQuery 的`clone方法生成兩個相同的 table，並將第一個 table 的tbody和第二個 table 的thead隱藏起來，這裏須要將第一個 table 的overflow設置爲hidden，第二個 table 的margin-top設置爲第一個 table 表頭的負高度。

這個方案適應全部的瀏覽器，可是會出現如： https://github.com/wenzhixin/bootstrap-table/issues/52 這個問題所描述的當使用瀏覽器自帶的搜索時，會出現兩處相同的內容，而且出如今表頭處（overflow 會自動調整），顯然這種方法會對用戶形成困擾和極大的影響用戶體驗。

方案三

方案三參考了許多 GitHub 上其餘實現固定表頭的 jQuery 插件，例如：fixedheadertable和datatables，跟方案二有點相似，他們都是經過 clone 表格的thead，而後將其固定住，並根據原來 table 的每一列的寬度從新計算設置固定表頭的寬度，關鍵代碼以下：

this.$body.find('tr:first-child:not(.no-records-found) > *').each(function(i) {
    that.$header_.find('div.fht-cell').eq(i).width($(this).innerWidth());
});

這個辦法是可行的，可是發現了一個小瑕疵，那就是使用 firefox （其餘瀏覽器都正常使用）的時候，即便表頭的寬度和原來表格的寬度如出一轍，有時候會渲染的不是很完美（剛剛提到的其餘插件也存在這個問題）。