当使用工具条中的显示/隐藏列的时候, 经常出现表格的列头与内容无法对齐的问题。

网上搜到两种处理方法,如下:

1. 去掉option中的height,完美对齐,但当数据较多的时候,table会自动增加height,显示所有数据而不显示滚动条。

2. 注释掉如下两行

//this.resetHeader();
//padding += this.$header.outerHeight();

完美对齐,但会导致无法冻结表头。

这两种结果都是鱼与熊掌不可兼得, 被影响的功能也是非常想要的,让小罗我很郁闷。

最后怀疑问题的原因应该是列的减少过程中,剩余列设置了宽度,但减少列后要填充剩余宽度时的计算问题。

 最后自己采用了如下方式,供大家参考:  

不设置其中一列的宽度,使其自动填充,如下代码

        <thead>
<tr>
<th data-field="Code" data-width="105px">编号</th>
<th data-field="Name" data-switchable="false">姓名</th>
<th data-field="Sex" data-width="120px">性别</th>
<th data-field="Age" data-width="120px">年龄</th>
<th data-field="LoloOperate" data-width="30px">操作</th>
</tr>
</thead>

这样只要不去掉名称,去掉其他列的时候不会出现对不齐的问题,为了防止此列被去掉,加上data-switchable="false"

正常业务中也经常会有这样要求自动填充宽度的列,算是比较好的一种解决方式。

Bootstrap table使用心得---thead与td无法对齐的问题的更多相关文章

  1. Bootstrap table使用心得

    序号显示带分页信息的连续编号,在序号列添加以下格式化代码即可. { field: 'number', title: '序号', align:'center', width:45, formatter: ...

  2. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  3. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  4. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  5. Bootstrap Table的例子(转载)

    转载自:http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table 使用的API: data1.json da ...

  6. bootstrap table使用小记

    bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...

  7. bootstrap table使用参考

    https://www.cnblogs.com/landeanfen/p/5821192.html  转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  8. Bootstrap Table 的用法

    记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...

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

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

随机推荐

  1. angular.js的时间指令

    最后样式 html .input-group(style="max-width:150px") input.form-control(uib-datepicker-popup=&q ...

  2. PreparedStatement/Statement处理insert update等操作时乱码,以及URL

    原文: 在顶目中无意中碰到PreparedStatement 在存DB时出现乱码,困扰了好久终于解决问题 问题代码如下 ps = con.prepareStatement(INSERT_SQL); p ...

  3. javaWeb学习总结(3)- Servlet基础

    Servlet的应用 Servlet是一种独立于平台和协议的服务器端的Java应用程序,可以生成动态的web页面.它担当Web浏览器或其他http客户程序发出请求. 与http服务器上的数据库或应用程 ...

  4. (HTTPS)-强制 SSL (HTTPS)Filter

    汗,无知真可怕,Servlert规范中已经有自动跳转到保护页面(Http - Https)的方法了: web.xml       <security-constraint>         ...

  5. php+ajax发起流程和审核流程(以请假为例)

    上一篇随笔中已经提到如何新建流程,那么现在我们就来看一下如何发起一个流程和审核流程~~~ 先说一下思路: (1)登录用session获取到用户的id (2) 用户发起一个流程 注意:需要写申请事由 ( ...

  6. [原创]LAMP+phpmyadmin+FTP环境搭建

    ***简单ftp服务器搭建: rpm –qa|grep vsftpd   //检查是否安装服务 yum –y install vsftpd-*   //安装服务 mkdir /var/ftp/uplo ...

  7. Codeforces Round #102 (Div. 2) 题解

    A. 解一个方程. 还是厚颜无耻地暴力吧~ #include <iostream> using namespace std; int r1, r2, c1, c2, d1, d2; boo ...

  8. String源码解析(二)

    方法的主要功能看代码注释即可,这里主要看函数实现的方式. 1.getChars(char dst[], int dstBegin) /** * Copy characters from this st ...

  9. HTML面试题

    1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 所谓的“浏览器内核”无非指的是一个浏览器最核心的部分-“Rendering Engine”,直译叫做“渲染引擎”,我们也常称为“排版引擎 ...

  10. 在.net下打造mongoDb基于官方驱动最新版本

    还是一如既往先把结构图放出来,上上个版本添加了redis的缓存,但是不满足我的需求,因为公司有项目要求是分布式所以呢,这里我就增加了mongoDb进行缓存分布式,好了先看结构图. 总的来说比较蛋疼,因 ...