方案一(<=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 （其他瀏覽器都正常使用）的時候，即使表頭的寬度和原來表格的寬度一模一樣，有時候會渲染的不是很完美（剛剛提到的其他外掛也存在這