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

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

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. CentOS 6.x 本地yum源配置与使用

    系统默认已经安装了可使用yum的软件包,所以可以直接配置: # mount  /dev/cdrom  /mnt                                挂载镜像,可以写到配置文件 ...

  2. 运维老鸟教你安装centos6.5如何选择安装包

    标签:老男孩教育 Centos6.5安装选包原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://oldboy.blog.51cto.c ...

  3. 基于腾讯云的Centos6.2系统搭建Apache+Mysql+PHP开发环境

    搭建环境,我肯定需要先购买腾讯云服务器的哦! 然后,我们打开SecureCRT 7.3,这是一款可以连接Linux系统的客户端工具,使用的很方便快捷,要注意的是,若你是Linux系统的就要用22端口, ...

  4. c++堆与栈的简单认识

    堆: 操作系统有一个记录空闲内存地址的链表,当系统收到程序的申请时,会遍历该链表,寻找第一个空间大于所申请空间的堆结点,然后将该结点从空闲结点链表中删 除,并将该结点的空间分配给程序,另外,对于大多数 ...

  5. SmartCoder每日站立会议03

    1.站立会议内容 今天是站立会议第三天,由于我们是做微信小程序,所以很多方面大家都在试验学习阶段,但是经过之前的了解和最近的学习,大家还是有很大进步的.首页简单的css样式已出,正在考虑首页样式再进行 ...

  6. netty基础--基本收发

    使用maven构建一个基本的netty收发应用,作为其他应用的基础.客户端使用packet sender工具. 1  添加netty依赖 1  maven netty依赖 <dependency ...

  7. Spring学习笔记——01 控制反转

    想一下之前学的Java,如果某个类需要引用某个对象,则需要手动new一个出来.这样带来的一个问题就是,若被引用的类发生改动或被删除,则引用它的所有类都会报错.因为两个类耦合在一起了.解决的办法就是不由 ...

  8. Web缓存相关知识整理

    一.前言  工作上遇到一个这样的需求,一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面.用到了HTML5 的本地存储 API 中的 localStorage作为解决方案,回顾了 ...

  9. 常见的几种Flume日志收集场景实战

    这里主要介绍几种常见的日志的source来源,包括监控文件型,监控文件内容增量,TCP和HTTP. Spool类型 用于监控指定目录内数据变更,若有新文件,则将新文件内数据读取上传 在教你一步搭建Fl ...

  10. ViewModel从未如此清爽 - 轻量级WPF MVVM框架Stylet

    Stylet是我最近发现的一个WPF MVVM框架, 在博客园上搜了一下, 相关的文章基本没有, 所以写了这个入门的文章推荐给大家. Stylet是受Caliburn Micro项目的启发, 所以借鉴 ...