Bootstrap-table表頭固定導致錯位了怎麼辦？怎麼解決？以下這篇文章就來跟大家介紹一下徹底解決Bootstrap-table表頭錯置問題的方法，希望對大家有幫助！
雖然現在前端已經是VAR三大框架的天下，但還是遺留了很多在使用JQuery Bootstrap的項目。例如我現在負責的框架…
情況是這樣的，產品想實現頁面向下滾動，當表頭到達頂部時固定表頭的效果。當我看到這個需求時，當時的心情是：Oh,so easy!^_^Y
但當我實際，實現完固定表頭後才發現，表頭竟然是歪的？ ！
【相關推薦：《bootstrap教學》】
Bootstrap-table如何固定表頭？
$('#table').bootstrapTable('destroy').bootstrapTable({
columns: columns,
data: data,
pagination: true,
pageSize: 25,
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 25, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
fixedColumns: false, // 固定列
fixedNumber: 0, //固定列数
height: 800, // <-----固定表头------
});如何解決表頭固定所導致的錯位問題？參考文章：https://www.wj0511.com/site/detail.html?id=290
文中指出$('#table').resize();和.fht-cell {width: 100px !important;}的解；實際試了一下只能部分解決問題；
表頭不超出整體邊框了，但是表頭和下面的列卻整體偏移了。
<script>
$(function(){
$('#table').bootstrapTable();
$(window).resize(function () {
$('#table').bootstrapTable('resetView');
});
})
</script>透過檢視元素，我們發現表頭中控制寬度的元素
#這裡將寬度設定為了122但是我的資料寬度只有100,這才造成了錯位。所以可以直接設定class為fht-cell的寬度，達到對齊的目的。
.fht-cell{width:120px!important;}
方案中的
$('#table').resize();其實就是讓表格根據視窗變化時，也重新計算大小以進行適配；方案中的
.fht-cell {width: 100px !important;}其實就是直接指定表頭寬度，已達到控制總寬度的目的。
但以上兩個方案還不足以解決我遇到的問題：表格頭與table body整體偏移。
偶然發現了一個css屬性：table-layout:fixed;
# 定義和用法
tableLayout 屬性用來顯示表格單元格、行、列的演算法規則。
於是乎
table {
table-layout: fixed;
}#最終方案#$('#table').resize(); table-layout :fixed;
這個方案基本上實作了在表頭固定的情況下，使表頭和列對齊，而且內容不會超出整體div； 但是美中不足的是不能自訂設定每列的寬度，實際上我是設定了，但是失效了。如果這一點解決了，那麼這個方案就完美了。
更多關於bootstrap的相關知識，可訪問：bootstrap基礎教程！ ！
以上是Bootstrap-table表頭固定導致錯位怎麼辦？怎麼徹底解決？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
