Bootstrap-table固定表頭並解決表頭與內容不對齊

寫在前面：

　　之前在做表格的時候,一直忽略了表格的height高度,導致表格的的表頭不能固定，這個樣子當表格數據過多的時候，導致無法分辨表頭是什么，所以決定固定表頭。

　　

　　固定表頭需要使用height這一屬性，但是如果使用height后就有可能出現表頭與表內容不對齊的問題，這里還要解決下，一般來說這點都是常見的，奇葩的是，當我一個頁面有多個table的時候，其中有一個table當點擊下一頁的時候與初始化顯示的第一頁時候的表格的高度不一致，即當第一次進去點擊下一頁的時候，表格的高度發生了變化。這里真的不知道什么原因導致的，所以只好查看表格對應的樣式，然后讓表格加載成功后去改變對應的內容高度，這里在網上查閱了資料，貌似遇到的人不多，所以這里也只是簡單記錄下，然后跟着自己項目頁面的的樣式去調整把。

　　1.涉及到的相關的樣式，主要是解決表頭與表格內容不對齊(這里設置表頭列寬無效的，就看自己項目中有沒有需要設置吧)

/*解決設置表頭列寬無效*/
       /* #table{
            table-layout: fixed;
        }*/
        /*解決固定表頭后,表頭與表內容不對齊*/
        .table_list_box{
            table-layout:fixed !important;
        }

 　　2.初始化表格時涉及到屬性的設置

height: 10,//行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度

　　3.如果有遇到當一個頁面有多個表格時，點擊下一頁，表格高度被自動改變時，可以去動態的改變表格內容的高度(這里根據自己項目的實際情況來)

$("#tab_finish .fixed-table-container").css({"height": h-extraH-selH-10,"padding-bottom":41});

　　4.網上查閱資料說要加上這段代碼，具體還不知道這代碼是在什么情況下起作用的

//解決當瀏覽器窗口變化是，表頭與表格不對齊
        $(window).resize(function () {
            $('#tableOne').bootstrapTable('resetView', {height: h-extraH});
            $('#tableTwo').bootstrapTable('resetView',{heighth: h-extraH-selH-10});
            $('#tableThree').bootstrapTable('resetView',{height: h-extraH-selH-10});
        });
    });

　　

 　　　單純的記錄下，希望可以幫助到有同樣問題的伙伴們~

 

　　　　2019/10/26,補充：

　　　　最近做表格又出現了此問題，上面的方法也不能奏效了，使用下面的方法就好了：

　　　　打開bootstrap-table.js 找到 BootstrapTable.prototype.resetView方法，找到如下代碼，然后注銷掉對應的代碼：

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

 

 

　　參考資料：

　　https://blog.csdn.net/weixin_41438039/article/details/78837749------bootstrap-table表頭固定，表內容不對齊的問題

　　https://blog.csdn.net/bestdoufu/article/details/80325038-------bootstrap table 表頭固定 、凍結列、橫向縱向滾動條

　　https://blog.csdn.net/qq_34543252/article/details/79084757-----Bootstrop Table窗口大小改變時修改Table高度

　　https://blog.csdn.net/u011271894/article/details/76178657 ------bootstrap-table 表頭和內容對不齊解決辦法