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