這篇文章主要介紹“Bootstrap-table表頭固定導致錯位怎么解決”，在日常操作中，相信很多人在Bootstrap-table表頭固定導致錯位怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Bootstrap-table表頭固定導致錯位怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設計、成都外貿(mào)網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)科爾沁左翼免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

遇到問題

雖然現(xiàn)在前端已經(jīng)是VAR三大框架的天下，但是還是遺留了很多在使用JQuery+Bootstrap的項目。比如我現(xiàn)在負責的框架…

情況是這樣的，產(chǎn)品想實現(xiàn)頁面向下滾動，當表頭到達頂部時固定表頭的效果。當我看到這個需求時，當時的心情是：Oh,so easy!^_^Y

但當我實際，實現(xiàn)完固定表頭后才發(fā)現(xiàn)，表頭竟然是歪的？！

Google一下

Bootstrap-table如何固定表頭？

 $('#table').bootstrapTable('destroy').bootstrapTable({
    columns: columns,
    data: data,
    pagination: true,
    pageSize: 25,
    pageNumber: 1, //初始化加載第一頁，默認第一頁
    pageSize: 25, //每頁的記錄行數(shù)（*）
    pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
    fixedColumns: false, // 固定列
    fixedNumber: 0, //固定列數(shù)
    height: 800, // <-----固定表頭------
});

如何解決表頭固定導致的錯位問題？參考文章：https://www.wj0511.com/site/detail.html?id=290

文中指出$('#table').resize();和.fht-cell {width: 100px !important;}的解決方案；實際試了一下只能部分解決問題； 表頭不超出整體邊框了，但是表頭和下面的列卻整體偏移了。

通過審查元素，我們發(fā)現(xiàn)表頭中控制寬度的元素

這里將寬度設置為了122但是我的數(shù)據(jù)寬度只有100,這才造成了錯位。所以可以直接設置class為fht-cell的寬度，達到對齊的目的。

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

分析方案

• 方案中的$('#table').resize();實際上是讓表格根據(jù)窗口變化時，也重新計算大小以進行適配；

• 方案中的.fht-cell {width: 100px !important;}實際上就是直接指定表頭寬度，已達到控制總寬度的目的。

但以上兩種方案還不足以解決我遇到的問題：表頭與table body整體偏移。

確定方案

偶然發(fā)現(xiàn)了一個css屬性：table-layout:fixed;

定義和用法

tableLayout 屬性用來顯示表格單元格、行、列的算法規(guī)則。

于是乎

table {
  table-layout: fixed;
}

最終方案$('#table').resize(); + table-layout:fixed;

效果展示

到此，關于“Bootstrap-table表頭固定導致錯位怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)站名稱：Bootstrap-table表頭固定導致錯位怎么解決
標題網(wǎng)址：http://weahome.cn/article/jjshdh.html