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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
JS字符串处理实例代码
Aug 05 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
JS中type="button"和type="submit"的区别
Jul 04 Javascript
angular.js实现购物车功能
Oct 23 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python 自定义对象的打印方法
2019/01/12 Python
python列表生成器迭代器实例解析
2019/12/19 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
西柏坡观后感
2015/06/08 职场文书
小学英语教学反思范文
2016/02/15 职场文书