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请求都会带上authorizationauthorization: maintool.getCookie('Token') },//maintool.getCookie是我自定义的方法 这里能拿到我存在cookie里的tokencomplete: 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

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

Bootstrap Table 表头和表格内容不对齐
Bootstrap Table 表头和表格内容不对齐前言原因解决方式思路一思路二思路三前言之前的一次开发中使用到了Bootstrap Table的组件,在使用过程中出现了表头与表格内容 ...
css修改谷歌浏览器和火狐浏览器的滚动条样式
css代码谷歌浏览器滚动条样式: ::-webkit-scrollbar {background: #f7f7f9;width: .08rem; /* 纵向滚动条滑块宽度 */height: .09 ...
火狐浏览器下点击a标签时出现虚线的解决方案
火狐浏览器下点击a标签时出现虚线的解决方案参考文章: (1)火狐浏览器下点击a标签时出现虚线的解决方案 (2)https://www.cnblogs.com/lhyhappy365/p/595646 ...
bootstrap table 表头与内容不对齐问题解决
bootstrap table 表头与内容不对齐问题解决参考文章: (1)bootstrap table 表头与内容不对齐问题解决 (2)https://www.cnblogs.com/sky-zk ...
手把手教你搭建firefox火狐浏览器下的自动化测试环境
自动化测试是时代趋势,因此很多测试人员开始研究自动化测试,web自动化测试化测试并不难,但是很多人都是被挡在了环境搭建这一步,后面学习激情全无,这里,我来手把手教大家搭建火狐浏览器下的自动化测试环境. ...
Linux火狐不能编辑,火狐浏览器下 contenteditable 内包含不可编辑元素，光标不能出现在元素后面...
火狐浏览器下 .edit { width: 200px; height: 40px; border: 1px solid green; } .disEdit { display: inline-blo ...
新版火狐浏览器标签页覆盖原页面解决方案
新版火狐浏览器标签页覆盖原页面解决方案安装插件:http://mozilla.com.cn/thread-319507-1-1.html 立即有效!
bootstrap Table表头固定
简介 bootstrap Table的使用方法不多介绍,可参考官方说明文档,地址:http://bootstrap-table.wenzhixin.net.cn/documentation/ 表头固定 ...
theadClasses设置Bootstrap Table表头样式
通过theadClasses属性设置表头样式. thead-light设置灰色背景 //bootstrap table初始化数据 itxst.com $('#table').bootstrapTabl ...

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

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

最新文章

热门文章