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


Posted in Javascript onDecember 28, 2016

首先说下我遇到的问题,就是设置表格的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表头与内容无法对齐的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
JS简单实现移动端日历功能示例
Dec 28 #Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 #Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 #Javascript
javascript实现简单的ajax封装示例
Dec 28 #Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 #Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 #Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 #Javascript
You might like
PHP 实现explort() 功能的详解
2013/06/20 PHP
使用PHP编写的SVN类
2013/07/18 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
jupyter 导入csv文件方式
2020/04/21 Python
python模拟实现分发扑克牌
2020/04/22 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
个人租房协议书
2014/04/09 职场文书
我爱我校演讲稿
2014/05/21 职场文书
网站推广策划方案
2014/06/04 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
Python 内置函数速查表一览
2021/06/02 Python
Nginx源码编译安装过程记录
2021/11/17 Servers