BootStrap Table 设置height表头与内容无法对齐的问题

首先说下我遇到的问题,就是设置表格的height后先加载所有数据再隐藏除第一条外的数据(即只显示第一条数据)发现表头与内容无法对齐,在网上也找了很多解决方法，但效果都不太理想，最后还是老老实实调样式，发现我们所看到的表头就是".fixed-table-header"这样一个div,而原来的表头因为margin-top而看不见了，而这个表头与内容是对齐的,因此就可以设置".fixed-table-header"的每一个"th"的宽度来实现对齐,于是我修改了bootstrap-table.js中fitHeader函数,看到该函数中有这么几行代码：

this.$header.find('th').each(function (i) {
      that.$header_.find('th').eq(i).data($(this).data());
});

于是遍历的时候我们可以设置所看到的表头的列宽度。将其改为:

this.$header.find('th').each(function (i) {
      that.$header_.find('th').eq(i).data($(this).data());
      // TODO: 2016-12-28新加的代码,用于解决设置height后表头与内容不对齐的bug(开始)
      that.$tableHeader.find('th').eq(i).width($(this).innerWidth());
      // TODO: 2016-12-28新加的代码,用于解决设置height后表头与内容不对齐的bug(结束)
    });

这样表头与内容就对齐了，当然浏览器窗口大小改变时也还需使用resetView函数。

以上所述是小编给大家介绍的BootStrap Table 设置height表头与内容无法对齐的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap的table表头固定tbody滚动的实例代码

    关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css

  • BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

  • BootStrap Table 设置height表头与内容无法对齐的问题

    首先说下我遇到的问题,就是设置表格的height后先加载所有数据再隐藏除第一条外的数据(即只显示第一条数据)发现表头与内容无法对齐,在网上也找了很多解决方法,但效果都不太理想,最后还是老老实实调样式,发现我们所看到的表头就是".fixed-table-header"这样一个div,而原来的表头因为margin-top而看不见了,而这个表头与内容是对齐的,因此就可以设置".fixed-table-header"的每一个"th"的宽度来实现对齐,于是

  • bootstrap table列和表头对不齐的解决方法

    我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐.出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不一样. 通过Chrome浏览器 f12,看到样式为 .fixed-table-header  .fixed-table-body .fixed-table-footer的3个div容器宽度不一样, .fixed-table-header  .fixed-table-footer这两个

  • 基于Bootstrap table组件实现多层表头的实例代码

    基于Bootstrap table组件实现多层表头的实例代码

    在做私活的时候,有一个需求是要在页面上实现多层表头.一开始有点懵,不知道怎么来实现,我回想起在JFTT的时候,曾用过Flex版的多层表头,不过那离现在已经很久远了,久远到Flex已经被淘汰出局了.于是在网上折腾了好一会儿,终于找到一款用起来简单,效果又很不错的组件--Bootstrap-table. Bootstrap-table还有很多强大的功能,但这篇文章我们把关注点只放在多层表头上,关注点确定后,这篇博客就很简单了,但我觉得还是很有必要推而广之--因为之前在看董卿主持的<诗词大会>,里面

  • Bootstrap Table使用整理(一)

    Bootstrap Table使用整理(一)

    相关阅读: Bootstrap Table使用整理(二)  http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三)  http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/115798.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/ar

  • Bootstrap Table 双击、单击行获取该行及全表内容

    什么是Bootstrap-table? 在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用.Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移

  • 解决element-ui的table表格控件表头与内容列不对齐问题

    解决element-ui的table表格控件表头与内容列不对齐问题

    目录 element-ui的table表格控件表头与内容列不对齐 解决方法 el-table表头和表格列宽不一样问题 直接上图 解决办法 element-ui的table表格控件表头与内容列不对齐 解决方法 将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!) body .el-table th.gutter{ display: table-cell!important; } 例如(app.vue): <template>   <div id=&q

  • JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

    JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

    正文 前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bootstrapTable的冻结列效果,并且可以兼容ie浏览器.这一年的时间,不断有园友以及群里面的朋友问过我关于固定高度之后,冻结列页面效果不能对齐的问题,奈何博主太忙,一直没有抽空将这个问题优化.最近项目里面也不断有人提过这个bug,这下子不能再推了,必须要直面"惨淡的bug",于

  • JS表格组件神器bootstrap table使用指南详解

    JS表格组件神器bootstrap table使用指南详解

    bootstrap table详细使用指南分享,供大家参考,具体内容如下 1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能.目前在github上已经有2600多个Star,可见其受欢迎程度.其官方网站地址为:http://bootstrap-table.wenz

  • Bootstrap table使用方法汇总

    bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述.本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它. 首先交代一下,jquery ,bootstrap ,bootstrap-table 三者

随机推荐