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)文章
JavaScript判斷變量是否為undefined的兩種寫法區(qū)別
這篇文章主要是對(duì)JavaScript判斷變量是否為undefined的兩種寫法區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12layui動(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-09JavaScript利用事件循環(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-10jquery操作下拉列表、文本框、復(fù)選框、單選框集合(收藏)
jquery操作拉列表、文本框、復(fù)選框、單選框集合。各種對(duì)下拉列表、文本框、復(fù)選框、單選框的jquery的相關(guān)操作。做為記錄和收藏的最好方法2014-01-01Java中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-02js使用ajax傳值給后臺(tái),后臺(tái)返回字符串處理方法
今天小編就為大家分享一篇js使用ajax傳值給后臺(tái),后臺(tái)返回字符串處理方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08