用bootstrap-table-fixed-columns固定表头，偏移不能对齐，解决方法

我是个做后台的，前端不熟，搞了一个下午，总结一下

1.更改bootstrap-table.js，在bootstrap-table-min.js是没有这行代码的。注释掉这2行以后，会导致表头无法固定，该方法不可用。

if (!this.options.cardView && this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
           // this.resetHeader();
           // padding += this.$header.outerHeight(true) + 1;
 }

在我的程序中，发现F12使用手机模式是是不会出现表头偏移的，只有用浏览器（17寸笔记本）才会出现这个情况

2.在onPostBody中手动赋值，可能因为本人菜的原因，不可用

这里弄了我一下午，主要是取不到固定后的表头标签。在加载table以后再去取也取不到，这里很奇怪
最开始按照搜索的其他答案，发现标签根本不对，搜不到。
后面我开始从fix-table-header 取th也取不到，最多取到table元素，往下children就是为0了。甚至.th-inner.sortable.both发现也取不到超长的元素
我怀疑人生。。。明明整个table元素都取到了，这里求前端同学解答。看F12发现实际上会生成不止一个table，带有自己id标记的table应该是被隐藏了，因为往下滚动的时候发现元素居然“在上面”，我猜测

 

附一下取正常width的代码，如果取的到加长后的固定表头元素，就可以直接更改width了。
             var th = $("#table-main thead th")
             console.log(th);
             th.each(function(){
                 var th = $(this).children()[0];
                 var thName = $(th).text();
                 console.log(thName+":"+$(this).css("width"));
             });

3.改css
第一种:我最终采用了这种，这样子其实不能完美解决，还是有一点点偏移但是一眼看去好多了，同时空间就有点浪费了，但是我是也没办法了。。。
 .fht-cell{
   width:13rem!important; 
   //width:135px!important; 
  }
第二种:会导致小屏幕时不会滚动
.table {
    table-layout:fixed !important;
}

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

第二天看源码的时候有了思路，不过大过年的假期在家里卡了整整一天的时间，我也懒得看了，有兴趣的可以去查一查。
DOM结构如下：

 

在fitHeader函数中，函数的最后有一段代码就是找tr里的th元素，然后赋值width（有一段包含在if里的同样代码其实并没有触发）
var zoomWidth = $th.innerWidth() - $th.find('.fht-cell').width();
$th.find('.fht-cell').width($this.innerWidth() - zoomWidth);

主要问题就出现在$this.innerWidth()，我在手机模式和正常模式打log，发现偏移的情况就是$this.innerWidth()大了，那么如果要追究问题去深究源码，应该在加载元素时设置好元素大小。
这里也同时证明了改.fht-cel能生效的原因。

 

20200218更新：

在测试中发现引用了bootstrap-table.js是没问题的，bootstrap-table.min.js是有问题的。在寻找解决表头偏移方法时可能下载了多个版本的js，也不确定该js是哪个版本，等审核通过以后再放上来。

在发现表头不会偏移以后，这段时间还有做的一个改动是更改了jquery的版本，同时下载到本地了，可能也有影响。。。头大