bootstrap table表头错位，火狐浏览器下滚动条挤像素问题解决方案。

首先这篇文章是一个关于bootstrap table的七零八碎各种bug的内容，后续可能会接着更新编辑。

1：前后端分离项目，后端往往要求前端请求后端时，携带着登陆时后端给你的token。

bootstrap table在本质上还是一个ajax请求的，所以你只需要全局配置一下ajax就可以辣~不需要去改动bootstrap table的源码。

$.ajaxSetup({
	contentType: "application/json",
	dataType: "json",//数据格式
	type: 'post',//请求方式
	cache: false,//缓存
	headers: {//这里就是配置请求头的内容辣  配置完这里以后 所有的ajax请求都会带上authorization
		authorization: maintool.getCookie('Token') 
	},//maintool.getCookie是我自定义的方法 这里能拿到我存在cookie里的token
	complete: function (xhr) {
		//token过期，则跳转到登录页面  401是后端JWT验证给到的状态码
		if (xhr.status === 401) {
			if (top != self) {  //判断是否存在父窗口（iframe页会用到）
				window.parent.location.href = '/index.html';
			} else {
				location.href = '/index.html';
			}
		}
	}
});

2：表头错位。

表头错位的问题五花八门，还有双表头的问题，双表头比较好解决，给table加一个高  height:100px，然后表头有时候会随着滚动而滚动，也这样去解决。弄不了就再百度吧，解决这个问题的文章太多了，也比较简单。

还是说错位吧。具体情况呢就是表格加载完之后，内容超出table容器高度，出现上下滚动条，如果你的项目框架没有全局设置过滚动条，那么这个滚动条是占17个像素的，然后恰巧table又有横向滚动条，你会发现横向拉到底，纵向把表格内容挤过去17px，

我这里的解决思路是css设置 把纵向滚动条宽度设置为0px；从而达到不占位置，且可以上下滚动不影响功能。但是总所周知这在火狐里是屁用没有（想sha人）火狐真的太反人类了。

为了解决这个问题，我在JS里判断浏览器是否为火狐，如果是，那么我给他最后一列表头增加17px的宽度，这样

然后上具体代码。这部分代码我封装了起来  在table加载成功的回调里执行

onSort: function (name, order) {  
            //点排序后事件
            WidthCallback();
},
onColumnSwitch: function (name, isShow) {//设置隐藏列显示列以后执行
   WidthCallback();
},
onLoadSuccess: function (data) {

WidthCallback()

},

function WidthCallback() {
	var e = window.navigator.userAgent;
	var el = $('.fixed-table-body')[0];//拿到渲染后的页面元素 table主体
	if (e.indexOf("Firefox") >= 0) {//判断火狐
		if (el.scrollHeight > el.clientHeight && el.scrollWidth > el.clientWidth) {//判断是否出现了竖向滚动条且有横向滚动条
			setTimeout(function () {//稍微延时一下，不然没效果，猜测是渲染顺序问题。
				var els = $('.fixed-table-header table thead tr th:last');//找到最后一个表头元素
				els.css({ "width": els.width() + 19 });//加宽17+2 2是边框像素占位
				if (el.scrollWidth - el.scrollLeft - el.clientWidth < 17) {//整个滚动条的长度-距离左边长度-div显示宽度 如果小于17则表头会错位
					$('.fixed-table-body').scrollLeft(el.scrollLeft - 17);//要让滚动条往左拉17个像素  非常重要 不然依然会错位。。。
				}
			}, 50);
		}
	} else {
        //不是火狐浏览器的情况下  我设置了滚动条样式所以只有10个像素宽了 所以下边数值发生变化。

		if (el.scrollHeight > el.clientHeight && el.scrollWidth > el.clientWidth) {
			setTimeout(function () {
				var els = $('.fixed-table-header table thead tr th:last');
				els.css({ "width": els.width() + 12 });
				if (el.scrollWidth - el.scrollLeft - el.clientWidth < 10) {//整个滚动条的长度-距离左边长度-div显示宽度 如果小于10则表头会错位
					$('.fixed-table-body').scrollLeft(el.scrollLeft - 10);
				}
			}, 50);
		}
	}
}

如果你设置了动态选择可见列，请不要少了onColumnSwitch方法，如果没有设置可见列可以删掉

在onColumnSwitch里再次调用方法是因为，如果你隐藏了最后一列，那么本来的倒数第二列就变成了最后一列，那一列是没有加滚动条宽度的，还会错位，所以咱给他加一下。over ，下边是设置本地缓存记忆显示隐藏列的文章链接

https://blog.csdn.net/qq_41610390/article/details/105270503