解决使用bootstrap table 表头固定出现与内容不对齐的问题
在网上找过不少答案,大多就是说使用bootstrap table的resetView方法,但发现并不能解决我遇到的情况,后来自己调试查看源码,终于解决了。这里给出demo代码的链接。
首先表头固定需要设置table的高度,为了让table可以随浏览器高度变化自动调节,我使用的是下面的代码
$(function(){
$("#table").bootstrapTable('resetView',{
height:$(window).height()
})
$(window).resize(function(){
$("#table").bootstrapTable('resetView',{
height:$(window).height()
})
})
})
但这并不能完全解决对齐的问题。通过调试发现,当页面出现横向滑条且table的内容行不多时会在浏览器(谷歌浏览器)特定高度范围出现表头与内容不对齐情况。在源码中发现resetView时会重新设置表头的margin-right样式
scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight() ?
getScrollBarWidth() : 0;
这里的scrollWidth为重新计算出的margin-right的值,问题也就在这里。
将此处修改为
scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
fixedBody.scrollHeight > fixedBody.clientHeight ?
getScrollBarWidth() : 0;
此时还未完全解决问题,仍会出现不对齐的情况,但只要你稍微滑动下横向滑条table又神奇的对齐了(具体原因没有研究)。那么一个简单的思路就是在源码设置完margin-right后,我们可以在源码中用代码自动去移动下纵向滑条使table自动对齐(注意要左右都移动,相当于原地踏步嘛~),下面是相关代码
/*自动移动滑动条,会使table表头自动对齐内容 by mg*/
var scrollLeft = $(fixedBody).scrollLeft()+1
$(fixedBody).scrollLeft(scrollLeft)
scrollLeft = $(fixedBody).scrollLeft()-1
$(fixedBody).scrollLeft(scrollLeft)
这样就解决了表头与内容对齐问题了。这里给出demo代码的链接
其中bootstrap-table.js为修改后的js,代码内搜索mg可以定位到修改的部分。