使用bootstrap table 插件固定表頭時 表頭與表格內容無法對齊


在使用bootstrap table開發后台管理系統,表格利用bootstrap-table插件來實現,使用bootstrap-table過程中,會出現表頭錯位的情況


 

表頭對不齊效果:

解決的方法:

1、出現錯位的原因是因為設置了固定表頭 height 這個屬性,只要去掉這個屬性就不會出現錯位的現象(當然使用這種方法以后表頭就無法實現固定)

2、設置table的樣式,給table元素添加 table-layout:fixed;經測試可以解決錯位問題

有的時候當頁面中有多個表格使用bootstrap-table的height屬性以后,當瀏覽器的寬度發生改變是表頭還是會出現錯位的問題

解決的辦法就是在每一個設置完展示的table數據后面都要加上

$('#el').bootstrapTable({

})

$(window).resize(function () {
  $("#el").bootstrapTable('resetView');
});

這樣可以解決一個頁面多個表格使用bootstrap-table的height屬性導致的表頭錯位問題

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM