bootstrap-table實現表頭固定以及列固定

以前使用bootstrap寫了一個報表表格，最近忽然找到我，說讓我看看能不能將表格的表頭和第一列進行固定，這樣的話方便查看數據，因而，我開始了苦逼的研究起來，畢竟我是個後端啊，對於前端的樣式問題，特別是小功能，煩的一批
這裏就記錄下個人研究成果
一：引入js和css

<!-- 引入jquery -->
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<!-- 引入bootstrap的js和css文件 -->
<link rel="stylesheet" href="./css/bootstrap.min.css" >
<script src="./js/bootstrap.min.js" ></script>
<!-- 固定表頭所需的js和css(bootstrap-table) -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap-table.min.css">
<script src="./js/bootstrap-table.min.js"></script>
<!-- 固定列所需的js和css(bootstrap-table-fixed-columns) -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap-table-fixed-columns.css">
<script src="./js/bootstrap-table-fixed-columns.js"></script>

query下載地址：http://www.jq22.com/jquery-in...
bootstrap下載地址：http://www.bootcss.com/
bootstrap-table下載地址：https://bootstrap-table.com/
bootstrap-table-fixed-columns下載地址：https://github.com/wenzhixin/...
這裏注意：
引入jquery時，不要引入jquery2.0.0(包括2.0.0)版本如下，若是你引入了2.0.0版本如下的jquery的話，當你編寫完代碼以後，在控制檯會出現以下錯誤：

二：編寫table表格(固定表頭)

<table  class="table table-bordered" id="table" data-toggle="table" data-height="200">
<thead>
<tr>
        <th>表頭一</th>
        <th>表頭二</th>
        <th>表頭三</th>
        <th>表頭四</th>
    </tr>
</thead>
<tbody>
<tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
    </tr>
</tbody>
</table>

上面代碼中的table標籤中的
data-toggle="table"表示的是啓用bootstrap表格，
data-height="200"表示設置表格的高度，用於配置固定表頭
因爲我這裏編寫的表格數據較少，因此展現出來的數據可能不會出現滑輪，看不出來固定表頭現象，你能夠向表格中添加多一點數據就能夠了
三：固定列

<script>
$(function(){
 //#table表示的是上面table表格中的id
 $("#table").bootstrapTable('destroy').bootstrapTable({
        fixedColumns: true, 
        fixedNumber: 1 //固定列數
    });
})
</script>

四：當瀏覽器窗口變化時，表頭與表格不對齊解決：

<script>
$(function(){
$('#table').bootstrapTable();
    $(window).resize(function () {
        $('#table').bootstrapTable('resetView');
    });
})
</script>

五：初次展現時表頭和表格數據不對齊解決(我的使用的方法，方法有點傻)
進過上面的過程咱們已經實現了表格的表格和列固定功能了，因而我便開始將報表修改起來，開始修改起來十分的輕鬆，沒有問題，可是，當我修改到一個報表的時候發現，開始的時候，表頭和數據之間就發生了不對齊現象：

因而我開始在網上搜索起來，可是網上搜索的答案根本解決不了，例如：

找到bootstrap-table的源碼中

if (this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
            //註釋掉下面兩行 取消表頭初始化解決表頭和內容不對齊問題
            //this.resetHeader();
            //padding += this.$header.outerHeight();
}

不知道寫這個的兄弟有沒有本身測試過，反正我註釋了以後，確實表頭和數據對齊了，可是表頭固定功能消失了，表頭和數據不對齊的緣由就是由於你設置了固定表頭影響的，你這樣將表頭固定功能去掉了，那麼我直接將table標籤中的data-height="200"去掉不久行了嗎，爲何還要改源碼呢？

因而我本身開始研究起來

最後我使用審查元素找到錯位的表頭位置，發現這樣一段代碼

<div class="fht-cell" style="width: 146px;"></div>

這裏將寬度設置爲了146可是個人數據寬度只有120,這才形成了錯位，

而後我找到bootstrap-table源碼設置div的class爲fht-cell寬度的代碼位置

雖然我找到了問題所在，可是源碼哪裏出問題了，我仍是不清楚，有知道的夥伴，歡迎告訴我答案

既然我不知道源碼出問題出在哪，那麼我就使用十分傻的方法，直接設置class爲fht-cell的寬度，將以前寬度爲146的覆蓋

.fht-cell{width:120px!important;}

而後打開觀看，錯誤問題解決了！！！