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

莒南網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
遇到問題

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

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

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

【相關(guān)推薦：《bootstrap教程》】

Google一下

Bootstrap-table如何固定表頭？

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

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

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

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

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

.fht-cell{width:120px!important;}分析方案

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

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

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

確定方案

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

定義和用法

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

于是乎

table { table-layout: fixed;}

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

效果展示

總結(jié)

這個(gè)方案基本實(shí)現(xiàn)了在表頭固定的情況下，使表頭和列對齊，而且內(nèi)容不會超出整體div；但是美中不足的是不能自定義設(shè)置每列的寬度，實(shí)際上我是設(shè)置了，但是失效了。如果這一點(diǎn)解決了，那這個(gè)方案就完美了。

更多關(guān)于bootstrap的相關(guān)知識，可訪問：bootstrap基礎(chǔ)教程?。?/p>
當(dāng)前名稱：Bootstrap-table表頭固定導(dǎo)致錯(cuò)位怎么辦？怎么徹底解決？
本文網(wǎng)址：http://weahome.cn/article/chccsg.html