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

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

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

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

但當(dāng)我實際，實現(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)致的錯位問題？參考文章：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>

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

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

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

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

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

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

確定方案

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

定義和用法

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

于是乎

table { table-layout: fixed;}

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

效果展示

總結(jié)

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

更多關(guān)于bootstrap的相關(guān)知識，可訪問：bootstrap基礎(chǔ)教程??！

本文題目：Bootstrap-table表頭固定導(dǎo)致錯位怎么辦？怎么徹底解決？
地址分享：http://aaarwkj.com/article36/chccsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、小程序開發(fā)、品牌網(wǎng)站設(shè)計、定制開發(fā)、微信小程序、虛擬主機

廣告

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