核心提示：写在前面：之前在做表格的时候,一直忽略了表格的height高度,导致表格的的表头不能固定，这个样子当表格数据过多的时候，导致无法分辨表头是什么，所以决定固定表头。固定表头需要使用heigh...
写在前面：
之前在做表格的时候,一直忽略了表格的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});
});
});
关注微信号：javalearns 随时随地学Java
或扫一扫
随时随地学Java
