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表头与内容无法对齐的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
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组件实现多层表头的实例代码
在做私活的时候,有一个需求是要在页面上实现多层表头.一开始有点懵,不知道怎么来实现,我回想起在JFTT的时候,曾用过Flex版的多层表头,不过那离现在已经很久远了,久远到Flex已经被淘汰出局了.于是在网上折腾了好一会儿,终于找到一款用起来简单,效果又很不错的组件--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表格控件表头与内容列不对齐 解决方法 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的冻结列功能彻底解决高度问题
正文 前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案 JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bootstrapTable的冻结列效果,并且可以兼容ie浏览器.这一年的时间,不断有园友以及群里面的朋友问过我关于固定高度之后,冻结列页面效果不能对齐的问题,奈何博主太忙,一直没有抽空将这个问题优化.最近项目里面也不断有人提过这个bug,这下子不能再推了,必须要直面"惨淡的bug",于
-
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 三者
随机推荐
- 简单Web service 身份验证解决方案
- 巧用CSS的MASK滤镜
- git简介_动力节点Java学院整理
- 用jQuery扩展自写的 UI导航
- 举例详解Python中threading模块的几个常用方法
- Java多线程基础 线程的等待与唤醒(wait、notify、notifyAll)
- jQuery代码优化 事件委托篇
- 基于jQuery实现表格的查看修改删除
- jQuery 隔行换色 支持键盘上下键,按Enter选定值
- 不同的jQuery API来处理不同的浏览器事件
- java 注解的基础详细介绍
- Win98自带的卫士:注册表修改深入技巧
- COCOON Counter统计程序后台写马
- Android 界面开发颜色整理
- 详解Vue2 SSR 缓存 Api 数据
- Python实现中一次读取多个值的方法
- 详解sql中的参照完整性(一对一,一对多,多对多)
- vue-router命名路由和编程式路由传参讲解
- CentOs 7.*中配置安装phpMyAdmin的完整步骤记录
- Linux下Docker及portainer相关配置方法