Bootstrap-table表頭固定導致錯位了怎么辦？怎么解決？下面本篇文章就來給大家介紹一下徹底解決Bootstrap-table表頭錯位問題的方法，希望對大家有所幫助！

莒南網站制作公司哪家好，找成都創新互聯公司！從網頁設計、網站建設、微信開發、APP開發、響應式網站建設等網站項目制作，到程序開發，運營維護。成都創新互聯公司成立與2013年到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選成都創新互聯公司。
遇到問題

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

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

但當我實際，實現完固定表頭后才發現，表頭竟然是歪的？！

【相關推薦：《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(){ $('#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表頭固定導致錯位怎么辦？怎么徹底解決？
地址分享：http://vcdvsql.cn/article36/chccsg.html

成都網站建設公司_創新互聯，為您提供定制網站、小程序開發、品牌網站設計、定制開發、微信小程序、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯