首頁  >  文章  >  web前端  >  Bootstrap-table表頭固定導致錯位怎麼辦?怎麼徹底解決?

Bootstrap-table表頭固定導致錯位怎麼辦?怎麼徹底解決?

青灯夜游
青灯夜游轉載
2021-12-17 19:21:076091瀏覽

Bootstrap-table表頭固定導致錯位了怎麼辦?怎麼解決?以下這篇文章就來跟大家介紹一下徹底解決Bootstrap-table表頭錯置問題的方法,希望對大家有幫助!

Bootstrap-table表頭固定導致錯位怎麼辦?怎麼徹底解決?

遇到問題

雖然現在前端已經是VAR三大框架的天下,但還是遺留了很多在使用JQuery Bootstrap的項目。例如我現在負責的框架…

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

但當我實際,實現完固定表頭後才發現,表頭竟然是歪的? !

Bootstrap-table表頭固定導致錯位怎麼辦?怎麼徹底解決?

【相關推薦:《bootstrap教學》】

Google一下

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(){
  $(&#39;#table&#39;).bootstrapTable();
  $(window).resize(function () {
      $(&#39;#table&#39;).bootstrapTable(&#39;resetView&#39;);
  });
})
</script>

透過檢視元素,我們發現表頭中控制寬度的元素

Bootstrap-table表頭固定導致錯位怎麼辦?怎麼徹底解決?

#這裡將寬度設定為了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;

效果展示

Bootstrap-table表頭固定導致錯位怎麼辦?怎麼徹底解決?

#總結

這個方案基本上實作了在表頭固定的情況下,使表頭和列對齊,而且內容不會超出整體div; 但是美中不足的是不能自訂設定每列的寬度,實際上我是設定了,但是失效了。如果這一點解決了,那麼這個方案就完美了。

更多關於bootstrap的相關知識,可訪問:bootstrap基礎教程! !

以上是Bootstrap-table表頭固定導致錯位怎麼辦?怎麼徹底解決?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除