13518219792
这篇文章主要介绍“Bootstrap-table表头固定导致错位怎么解决”，在日常操作中，相信很多人在Bootstrap-table表头固定导致错位怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Bootstrap-table表头固定导致错位怎么解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
专注于为中小企业提供成都做网站、成都网站设计、成都外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业科尔沁左翼免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
虽然现在前端已经是VAR三大框架的天下，但是还是遗留了很多在使用JQuery+Bootstrap的项目。比如我现在负责的框架…
情况是这样的，产品想实现页面向下滚动，当表头到达顶部时固定表头的效果。当我看到这个需求时，当时的心情是：Oh,so easy!^_^Y
但当我实际，实现完固定表头后才发现，表头竟然是歪的？！
Bootstrap-table如何固定表头？
$('#table').bootstrapTable('destroy').bootstrapTable({
columns: columns,
data: data,
pagination: true,
pageSize: 25,
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 25, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
fixedColumns: false, // 固定列
fixedNumber: 0, //固定列数
height: 800, // <-----固定表头------
});如何解决表头固定导致的错位问题？参考文章：https://www.wj0511.com/site/detail.html?id=290
文中指出$('#table').resize();和.fht-cell {width: 100px !important;}的解决方案；实际试了一下只能部分解决问题；
表头不超出整体边框了，但是表头和下面的列却整体偏移了。
通过审查元素，我们发现表头中控制宽度的元素
这里将宽度设置为了122但是我的数据宽度只有100,这才造成了错位。所以可以直接设置class为fht-cell的宽度，达到对齐的目的。
.fht-cell{width:120px!important;}
方案中的
$('#table').resize();实际上是让表格根据窗口变化时，也重新计算大小以进行适配；方案中的
.fht-cell {width: 100px !important;}实际上就是直接指定表头宽度，已达到控制总宽度的目的。
但以上两种方案还不足以解决我遇到的问题：表头与table body整体偏移。
偶然发现了一个css属性：table-layout:fixed;
定义和用法
tableLayout 属性用来显示表格单元格、行、列的算法规则。
于是乎
table {
table-layout: fixed;
}最终方案$('#table').resize(); + table-layout:fixed;
到此，关于“Bootstrap-table表头固定导致错位怎么解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
