在使用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. 【问题汇总】ScrollView嵌套GridView的问题

    在开发中遇到了ScrollView嵌套GridView的情况,由于这两款控件都自带滚动条,当它们碰到一起的时候便会出问题,即GridView会显示不全. 解决办法,自定义一个GridView控件. [ ...

  2. 【编程练习】poj1111

    Image Perimeters Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8632   Accepted: 5168 ...

  3. ios zxing扫码问题

    在ios 中 扫瞄二维码,条形码基本有 2中第三方的库,一个是zbar 一个是zxing,zxing 在android中表现的比较出色,但是在ios 中不是很好用,扫瞄效率低,我们一般都用zbar,但 ...

  4. 关于"net::ERR_CONNECTION_ABORTED"和"Firebug 达到了 Post 请求大小限制"的问题

    1.其中"net::ERR_CONNECTION_ABORTED"是在Chrome的控制台中打印出来的. 2."Firebug 达到了 Post 请求大小限制" ...

  5. iOS中分段控制器与UIScrollView结合使用

    指定根视图: // 设置window的根视图控制器 self.window.rootViewController = [[UINavigationController alloc] initWithR ...

  6. iOS中 WGAFN_网络监控 技术分享

    需要用到第三方AFNetworking/SVProgressHUD 没有的可以关注我微博私信我.http://weibo.com/hanjunqiang AppDelegate.m #import & ...

  7. iOS学习新知识-加速计和陀螺仪

    一.CoreMotion框架介绍 我们知道有一些iOS的应用,会有一些特殊的要求,比如: 电子罗盘指南针之类的应用:让我们知道方向. 运动类型软件:让我们知道我们跑步多少公里. 社交软件中的摇一摇功能 ...

  8. Oracle 中PLSQL的ftp应用

    CREATE OR REPLACE PACKAGE BODY ftp AS -- ----------------------------------------------------------- ...

  9. 自定义gradle的property

    在android studio上运行项目,gradle的配置是必不可少的,但是随着项目的逐渐成长,迎面而来的就是.各种依赖包的添加,数不胜数的签名,渠道包等,整个gradle变得很乱,这样其实我们可以 ...

  10. Dynamics CRM 系统自定义部分的语言翻译

    Dynamics CRM 自带语言切换功能,在官网下载所需语言包安装后,在设置语言中就能看到你所添加的语言,勾选要启用的语言应用即可,再打开系统设置--语言就能看到可更改用户界面语言的显示了. 但官方 ...