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高度

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有