我們在使用bootstraptable做表格展示時，有時需要固定表格的高度當數據超出高度會出現滾動條，這時有可能出現表頭列和數據列對不齊。出現這個問題的原因是數據列出現了滾動條占了寬度，造成表頭 數據 的div寬度不一樣。
通過Chrome瀏覽器 f12，看到樣式為 .fixed-table-header .fixed-table-body .fixed-table-footer的3個div容器寬度不一樣， .fixed-table-header .fixed-table-footer這兩個div沒有滾動條。
解決方法：
bootstraptable在渲染完列表時會執行onPostBody事件，代碼如下。
$('#dataGrid').bootstrapTable({ method: 'post', url: 'http://www.itxst.com/?ajax', dataType: "json", striped: true, //隔行變色 pagination: true, //底部顯示分頁碼 pageSize: 30, //每頁顯示行數 pageNumber: 1, //頁碼 pageList: [30, 50, 100, 200, 500], //每頁顯示數量選擇器 idField: "objectId", //主鍵字段 showColumns: true, //顯示隱藏列 showRefresh: true, //刷新按鈕 singleSelect: true, search: false, clickToSelect: true, sidePagination: "server", queryParams: queryParams, queryParamsType: "limit", toolbar: "#toolbar", //設置工具欄的Id columns: column, //要顯示的列 silent: true, //刷新事件必須設置 formatLoadingMessage: function () { return "it小書童正在加載中..."; }, formatNoMatches: function () { return '未查詢到結果'; }, onLoadError: function (data) { }, onClickRow: function (row) { window.location.href = "/detail?id=" + row.objectId; }, onPostBody:function() { //重點就在這里，獲取渲染后的數據列td的寬度賦值給對應頭部的th,這樣就表頭和列就對齊了 var header=$(".fixed-table-header table thead tr th"); var body=$(".fixed-table-header table tbody tr td"); var footer=$(".fixed-table-header table tr td"); body.each(function(){ header.width((this).width()); footer.width((this).width()); }); }});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
