前端：固定表格（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 （其余浏览器都正常使用）的时候，即便表头的宽度和原来表格的宽度如出一辙，有时候会渲染的不是很完美（刚刚提到的其余插件也存在这个问题）。