BootStrap Table 設(shè)置height表頭與內(nèi)容無(wú)法對(duì)齊的問(wèn)題
首先說(shuō)下我遇到的問(wèn)題,就是設(shè)置表格的height后先加載所有數(shù)據(jù)再隱藏除第一條外的數(shù)據(jù)(即只顯示第一條數(shù)據(jù))發(fā)現(xiàn)表頭與內(nèi)容無(wú)法對(duì)齊,在網(wǎng)上也找了很多解決方法，但效果都不太理想，最后還是老老實(shí)實(shí)調(diào)樣式，發(fā)現(xiàn)我們所看到的表頭就是".fixed-table-header"這樣一個(gè)div,而原來(lái)的表頭因?yàn)閙argin-top而看不見(jiàn)了，而這個(gè)表頭與內(nèi)容是對(duì)齊的,因此就可以設(shè)置".fixed-table-header"的每一個(gè)"th"的寬度來(lái)實(shí)現(xiàn)對(duì)齊,于是我修改了bootstrap-table.js中fitHeader函數(shù),看到該函數(shù)中有這么幾行代碼：
this.$header.find('th').each(function (i) {
that.$header_.find('th').eq(i).data($(this).data());
});
于是遍歷的時(shí)候我們可以設(shè)置所看到的表頭的列寬度。將其改為:
this.$header.find('th').each(function (i) {
that.$header_.find('th').eq(i).data($(this).data());
// TODO: 2016-12-28新加的代碼,用于解決設(shè)置height后表頭與內(nèi)容不對(duì)齊的bug(開(kāi)始)
that.$tableHeader.find('th').eq(i).width($(this).innerWidth());
// TODO: 2016-12-28新加的代碼,用于解決設(shè)置height后表頭與內(nèi)容不對(duì)齊的bug(結(jié)束)
});
這樣表頭與內(nèi)容就對(duì)齊了，當(dāng)然瀏覽器窗口大小改變時(shí)也還需使用resetView函數(shù)。
以上所述是小編給大家介紹的BootStrap Table 設(shè)置height表頭與內(nèi)容無(wú)法對(duì)齊的問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
在全局執(zhí)行環(huán)境中使用this，標(biāo)識(shí)Global對(duì)象，在瀏覽器中就是window對(duì)象。2010-03-03
JavaScript判斷變量是否為undefined的兩種寫法區(qū)別
這篇文章主要是對(duì)JavaScript判斷變量是否為undefined的兩種寫法區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
layui動(dòng)態(tài)渲染生成左側(cè)3級(jí)菜單的方法(根據(jù)后臺(tái)返回?cái)?shù)據(jù))
今天小編就為大家分享一篇layui動(dòng)態(tài)渲染生成左側(cè)3級(jí)菜單的方法(根據(jù)后臺(tái)返回?cái)?shù)據(jù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript利用事件循環(huán)實(shí)現(xiàn)數(shù)據(jù)預(yù)加載
當(dāng)我們請(qǐng)求好第一頁(yè)數(shù)據(jù)后,將請(qǐng)求下一頁(yè)放到異步任務(wù)隊(duì)列里（宏任務(wù)或者微任務(wù)）,等當(dāng)前同步任務(wù)執(zhí)行完成后,立馬請(qǐng)求下一頁(yè)數(shù)據(jù),本文給大家介紹了JavaScript如何利用事件循環(huán)實(shí)現(xiàn)數(shù)據(jù)預(yù)加載,需要的朋友可以參考下2024-05-05
超好玩js頁(yè)面效果之實(shí)現(xiàn)數(shù)值的動(dòng)態(tài)變化
這篇文章主要給大家介紹了關(guān)于超好玩js頁(yè)面效果之實(shí)現(xiàn)數(shù)值的動(dòng)態(tài)變化的相關(guān)資料,文中通過(guò)示例代碼及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-10-10
jquery操作下拉列表、文本框、復(fù)選框、單選框集合(收藏)
jquery操作拉列表、文本框、復(fù)選框、單選框集合。各種對(duì)下拉列表、文本框、復(fù)選框、單選框的jquery的相關(guān)操作。做為記錄和收藏的最好方法2014-01-01
縮略圖在網(wǎng)站中最常用的就是產(chǎn)品列表頁(yè)面，一行顯示幾張圖片，有的在圖片底下帶有標(biāo)題、描述內(nèi)容、按鈕等信息。本文給大家介紹Bootstrap縮略圖組件與警示框組件，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
Java中int與integer的區(qū)別（基本數(shù)據(jù)類型與引用數(shù)據(jù)類型）
這篇文章主要介紹了int與integer的區(qū)別（基本數(shù)據(jù)類型與引用數(shù)據(jù)類型）,簡(jiǎn)單的說(shuō) int 是基本數(shù)據(jù)類型，integer 是引用數(shù)據(jù)類型，具體區(qū)別詳解大家參考下本文2017-02-02
本篇文章主要介紹了webpack 樣式加載的實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
js使用ajax傳值給后臺(tái),后臺(tái)返回字符串處理方法
今天小編就為大家分享一篇js使用ajax傳值給后臺(tái),后臺(tái)返回字符串處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08