在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况


表头对不齐效果:

解决的方法:

1、出现错位的原因是因为设置了固定表头 height 这个属性,只要去掉这个属性就不会出现错位的现象(当然使用这种方法以后表头就无法实现固定)

2、设置table的样式,给table元素添加 table-layout:fixed;经测试可以解决错位问题

有的时候当页面中有多个表格使用bootstrap-table的height属性以后,当浏览器的宽度发生改变是表头还是会出现错位的问题

解决的办法就是在每一个设置完展示的table数据后面都要加上

$('#el').bootstrapTable({

})

$(window).resize(function () {
  $("#el").bootstrapTable('resetView');
});

这样可以解决一个页面多个表格使用bootstrap-table的height属性导致的表头错位问题

使用bootstrap table 插件固定表头时 表头与表格内容无法对齐的更多相关文章

  1. bootstrap table插件动态加载表头

    这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...

  2. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

  3. bootstrap table 插件多语言切换

    在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...

  4. Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法

    今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...

  5. 在ASP.NET MVC中使用 Bootstrap table插件

    Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 1. 控制器代码: using Syst ...

  6. 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:    官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/        开始使用:http://bootstrap-table. ...

  7. [转]bootstrap的table插件动态加载表头

    原文地址:https://blog.csdn.net/abubu123/article/details/78060321 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表 ...

  8. bootstrap table 插件 搜索

    以前用过easyui datagrid 每次搜索的时候调用datagrid构造方法 重新获取数据, 发现bootstrap-table 插件不行,只需要初始化一次, 以后每次搜索时,直接调用refre ...

  9. Bootstrap table插件 被选中的行颜色改变

    参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...

随机推荐

  1. 4.4、Android Studio在命令行运行Gradle

    默认情况下,在你的Gradle构建设置中有两种构建类型:一种是为了调试你的应用,debug类型:一种是构建最终的发布版本,release类型.无论你使用哪种模式,你的app必须在安装到设备或虚拟机中之 ...

  2. 06 intent flag三种属性

    flag属性可以看做和写在清单文件中的启动模式一样 但效果有一定差别 1,FLAG_ACTIVITY_SINGLE_TOP:启动模式里的SingleTop一致  如果X启动模式设置为FLAG_ACTI ...

  3. UNIX网络编程——TCP带外数据小结

    带外数据概念实际上时向接收端传送三个不同的信息:(1)发送端进入紧急模式这个事实.接收进程得以通知这个事实的手段不外乎SIGURG信号或select调用.本通知在发送进程发送带外字节后由发送端TCP立 ...

  4. UNIX网络编程——分析一帧基于UDP的TFTP协议帧

    下图是UDP的段格式: 相比TCP段格式,UDP要简单得多,也没啥好说的,需要注意的是UDP数据长度指payload加上首部的长度. 下面分析一帧基于UDP的TFTP协议帧: 以太网首部 0000: ...

  5. 【一天一道LeetCode】#97. Interleaving String

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given s ...

  6. 检查app的activity是否在当前

    APP开发中经常会遇到这种需求,需要检查当前的APP是不是可见的,比如,如果是可见的就维持一个socket长连接,如果切到后台不可见了,就断开这个连接.Android本来并不允许APP去监听home键 ...

  7. Dynamics CRM2013 业务规则的新建、激活与删除

    CRM2013的一个新的feature叫做业务规则,一些页面的简单的显示隐藏的控制.字段是否必填.有条件的锁定字段.错误提示等等,以前都是需要些脚本代码实现现在只需通过业务规则做一些简单的配置就可以达 ...

  8. python的sys模块

    Sys模块函数之多,我只能选取自己认为比较实用的一些函数列在此处.借马云找员工的说法,"找最合适的而不是最天才的",这句话,我个人觉得在很多方面都能适应,学习也不在话下.Sys模块 ...

  9. DQM Serial Sync Index Program ERROR

    Error syncing hz_stage_party_sites_t1:ORA-20000:Oracle Text 错误: DRG-10502:索引AR.HZ_STAGE_PARTY_SITES_ ...

  10. 基于Struts+Hibernate开发过程中遇到的错误

    1.import  javax.servlet.http.HttpServletRequest 导入包出错 导入包出错,通常是包未引入,HttpServletRequest包是浏览器通过http发出的 ...