1. 程式人生 > >Bootstrap-table固定表頭並解決表頭與內容不對齊

Bootstrap-table固定表頭並解決表頭與內容不對齊

寫在前面:

  之前在做表格的時候,一直忽略了表格的height高度,導致表格的的表頭不能固定,這個樣子當表格資料過多的時候,導致無法分辨表頭是什麼,所以決定固定表頭。

  

  固定表頭需要使用height這一屬性,但是如果使用height後就有可能出現表頭與表內容不對齊的問題,這裡還要解決下,一般來說這點都是常見的,奇葩的是,當我一個頁面有多個table的時候,其中有一個table當點選下一頁的時候與初始化顯示的第一頁時候的表格的高度不一致,即當第一次進去點選下一頁的時候,表格的高度發生了變化。這裡真的不知道什麼原因導致的,所以只好查看錶格對應的樣式,然後讓表格載入成功後去改變對應的內容高度,這裡在網上查閱了資料,貌似遇到的人不多,所以這裡也只是簡單記錄下,然後跟著自己專案頁面的的樣式去調整把。

  1.涉及到的相關的樣式,主要是解決表頭與表格內容不對齊(這裡設定表頭列寬無效的,就看自己專案中有沒有需要設定吧)

/*解決設定表頭列寬無效*/
       /* #table{
            table-layout: fixed;
        }*/
        /*解決固定表頭後,表頭與表內容不對齊*/
        .table_list_box{
            table-layout:fixed !important;
        }

   2.初始化表格時涉及到屬性的設定

height: 10,//行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度

  3.如果有遇到當一個頁面有多個表格時,點選下一頁,表格高度被自動改變時,可以去動態的改變表格內容的高度(這裡根據自己專案的實際情況來)

$("#tab_finish .fixed-table-container").css({"height": h-extraH-selH-10,"padding-bottom":41});

  4.網上查閱資料說要加上這段程式碼,具體還不知道這程式碼是在什麼情況下起作用的

//解決當瀏覽器視窗變化是,表頭與表格不對齊
        $(window).resize(function () {
            $('#tableOne').bootstrapTable('resetView', {height: h-extraH});
            $('#tableTwo').bootstrapTable('resetView',{heighth: h-extraH-selH-10});
            $('#tableThree').bootstrapTable('resetView',{height: h-extraH-selH-10});
        });
    });

  

    單純的記錄下,希望可以幫助到有同樣問題的夥伴們~

 

  參考資料:

  https://blog.csdn.net/weixin_41438039/article/details/78837749------bootstrap-table表頭固定,表內容不對齊的問題

  https://blog.csdn.net/bestdoufu/article/details/80325038-------bootstrap table 表頭固定 、凍結列、橫向縱向滾動條

  https://blog.csdn.net/qq_34543252/article/details/79084757-----Bootstrop Table視窗大小改變時修改Table高度