最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

怎么解决Bootstrap-table表头固定导致的错位问题?

遇到问题

虽然现在前端已经是Vue、Aangular、React三大框架的天下,但是还是遗留了很多在使用JQuery+Bootstrap的项目。比如我现在负责的框架…

情况是这样的,产品想实现页面向下滚动,当表头到达顶部时固定表头的效果。当我看到这个需求时,当时的心情是:so easy!

但当我实际,实现完固定表头后才发现,表头竟然是歪的?!

实现完固定表头后显示歪的

Google一下

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, // <-----固定表头------
});

如何解决表头固定导致的错位问题?

度娘给的意见是$(‘#table’).resize();和.fht-cell{width:100px!important;}的解决方案;实际试了一下只能部分解决问题;

表头不超出整体边框了,但是表头和下面的列却整体偏移了。

$(function(){
  $('#table').bootstrapTable();
  $(window).resize(function () {
      $('#table').bootstrapTable('resetView');
  });
})

通过审查元素,我们发现表头中控制宽度的元素

表头中控制宽度的元素

这里将宽度设置为了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;

效果展示:

最终效果展示

总结

这个方案基本实现了在表头固定的情况下,使表头和列对齐,而且内容不会超出整体div;但是美中不足的是不能自定义设置每列的宽度,实际上我是设置了,但是失效了。如果这一点解决了,那这个方案就完美了。欢迎聪明的你提出更好的解决方案。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 怎么解决Bootstrap-table表头固定导致的错位问题?

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发