脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap table 对齐

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

 更新时间：2016年12月28日 15:22:17   投稿：mrr  
这篇文章主要介绍了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表头与内容无法对齐的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 使用js实现雪花飘落效果

    使用js实现雪花飘落效果

    以下是对使用js实现雪花飘落的效果进行了介绍。需要的朋友可以 过来参考下
    2013-08-08
  • JavaScript中reduce()的5个基本用法示例

    JavaScript中reduce()的5个基本用法示例

    这篇文章主要给大家介绍了关于JavaScript中reduce()的5个基本用法示例，文中通过示例代码以及图文介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2020-07-07
  • JavaScript控制浏览器全屏显示简单示例

    JavaScript控制浏览器全屏显示简单示例

    这篇文章主要介绍了JavaScript控制浏览器全屏显示,结合简单实例形式分析了JavaScript响应鼠标事件控制浏览器全屏显示与退出全屏显示相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • 每周一练 之 数据结构与算法（Stack）

    每周一练 之 数据结构与算法（Stack）

    这篇文章主要介绍了数据结构与算法（Stack），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • three.js如何实现3D动态文字效果

    three.js如何实现3D动态文字效果

    这篇文章主要给大家介绍了关于three.js如何实现3D动态文字效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JS的事件绑定深入认识

    JS的事件绑定深入认识

    类似于JQuery的这样js库已经实现了很好的数据绑定机制的封装效果，但只知其然，不知其所以然还有会有种蒙在鼓里的感觉，亲自去分析一下具体的实现，会有一种豁然开朗的感觉
    2014-06-06
  • js合并数组对象代码实现(将数组中具有相同属性对象合并到一起组成一个新数组)

    js合并数组对象代码实现(将数组中具有相同属性对象合并到一起组成一个新数组)

    项目过程中经常会遇到JS数组合并的情况,时常为这个纠结,这篇文章主要给大家介绍了关于js合并数组对象(将数组中具有相同属性对象合并到一起组成一个新数组)的相关资料,需要的朋友可以参考下
    2024-01-01
  • 在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题

    在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题

    这样的脚本你在ie8下调用，在ie8地址栏下按下回车后调用jquery的对像、方法什么的没有问题，但是刷新之后就有问题。就是刷新之后无论怎样你要在地址栏按一下回车。
    2010-11-11
  • javascript显示隐藏层比较不错的方法分析

    javascript显示隐藏层比较不错的方法分析

    通常的解决办法是把“答案”当作整个问题容器的子元素，然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。
    2008-09-09
  • javascript currentTarget对象介绍

    javascript currentTarget对象介绍

    javascript currentTarget对象介绍...
    2007-10-10

最新评论