bootstrap table表头固定时,出现表头与内容不对齐情况

解决使用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可以定位到修改的部分。