在使用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. [struts2学习笔记] 第二节 使用Maven搞定管理和构造Struts 2 Web应用程序的七个步骤

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40303897 官方文档:http://struts.apache.org/releas ...

  2. 内存管理单元--MMU

    现代操作系统普遍采用虚拟内存管理(Virtual Memory Management)机制,这需要处理器中的MMU(Memory Management Unit,内存管理单元)提供支持,本节简要介绍M ...

  3. java中List接口的实现类 ArrayList,LinkedList,Vector 的区别 list实现类源码分析

    java面试中经常被问到list常用的类以及内部实现机制,平时开发也经常用到list集合类,因此做一个源码级别的分析和比较之间的差异. 首先看一下List接口的的继承关系: list接口继承Colle ...

  4. 控制成本,控制成本知识点,挣值和实际成本、EAC,ETC.TCPI解析表

  5. 最简单的基于librtmp的示例:接收(RTMP保存为FLV)

    ===================================================== 最简单的基于libRTMP的示例系列文章列表: 最简单的基于librtmp的示例:接收(RT ...

  6. Java:使用匿名内部类在方法内部定义并启动线程

    下面的代码展示了在一个方法中,通过匿名内部类定义一个Thread,并Override它的run()方法,之后直接启动该线程. 这样的代码可用于在一个类内部通过另起线程来执行一个支线任务,一般这样的任务 ...

  7. 【shell脚本】mysql每日备份shell脚本

    每天固定时间用mysqldump 备份mysql数据. #!/bin/bash #每天早上4点, mysql备份数据 orangleliu #chmod 700 backup.sh #crontab ...

  8. JS 可变参数

     JS可变参数的方法不需要参数,同时,我们应该注意在写JS文件的时候避免定义arguments变量. <html> <head> <title>Javascri ...

  9. 记录github出错及解决方案

    刚刚在github上更新自己项目的一些内容时出现了一些错误,几经折腾及在网上查找资料终于解决.具体记录如下: 主要就是就是在push时报错,错误信息如下: 根据报错信息原本以为是要重新pull一下,但 ...

  10. Objective-C实现常用的4种排序算法

    OC实现的4种排序又来了! 4种排序分别是:快速排序.冒泡排序.选择排序.插入排序,其他的我就不写了,因为OC里的数组中不能存放基本数据类型,如int不能存放,只能放对象,所以所有的数据我用了NSNu ...