Bootstrap table使用心得---thead与td无法对齐的问题
当使用工具条中的显示/隐藏列的时候, 经常出现表格的列头与内容无法对齐的问题。
网上搜到两种处理方法,如下:
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无法对齐的问题的更多相关文章
- Bootstrap table使用心得
序号显示带分页信息的连续编号,在序号列添加以下格式化代码即可. { field: 'number', title: '序号', align:'center', width:45, formatter: ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- Bootstrap Table的例子(转载)
转载自:http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table 使用的API: data1.json da ...
- bootstrap table使用小记
bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...
- bootstrap table使用参考
https://www.cnblogs.com/landeanfen/p/5821192.html 转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...
- Bootstrap Table 的用法
记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
随机推荐
- Swift学习笔记(4):字符串
目录: 初始化 常用方法或属性 字符串索引 初始化 创建一个空字符串作为初始值: var emptyString = "" // 空字符串字面量 var anotherEmptyS ...
- 深入理解Java虚拟机 - 学习笔记 1
Java内存区域 程序计数器 (Program Counter Register) 是一块较小的内存空间,可以看作是当前线程所执行的字节码的行号指示器.在虚拟机的概念模型里,字节码解释器工作时就是通过 ...
- VOD, TVOD, SVOD FVOD的区别(转)
VOD: Video On Demand 视频点播 TVOD: True Video On Demand 即点即播 按次付费点播,付费后,观众一般有48小时的时间可以观看该片,48小时后需要再次付费才 ...
- LINUX 硬盘分区及文件系统
一,top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. 1. 第一行是任务队列信息 2. 第二.三行为进程和CPU的信息 3. 第 ...
- OWIN 自宿主模式WebApi项目,WebApi层作为单独类库供OWIN调用
OWIN是Open Web Server Interface for .NET的首字母缩写,他的定义如下: OWIN在.NET Web Servers与Web Application之间定义了一套标准 ...
- Unity运动残影技能
残影实现: 1.List<DrawMesh> list,此list中包含某一帧动画模型网格.材质 2.每过一段时间就将运动物体的模型add到list中(优化:未实现,网格合并) 3.Lat ...
- javaSE_06Java中的数组(array)-练习
(1),数组的两种遍历方式,顺序查找,二分查找,求最大最小数,冒泡排序,选择排序. public class Test1{ public static void main(String[] args) ...
- 隐马尔科夫模型HMM(一)HMM模型
隐马尔科夫模型HMM(一)HMM模型基础 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数(TODO) 隐马尔科夫模型HMM(四)维特比 ...
- VMware 创建多台Linux机器并配置IP
1.查看并分配虚拟网络 我们首先要知道 VMware 三种网络模式的区别. ①.Bridged(桥接模式):就是将主机网卡与虚拟机虚拟的网卡利用虚拟网桥进行通信.在桥接的作用下,类似于把物理主机虚拟为 ...
- Java经典编程题50道之四十一
海滩上有若干个一堆桃子,五只猴子来分.第一只猴子把这堆桃子平均分为五份,多了一个,这只猴子把多的一个扔入海中,拿走了一份. 第二只猴子把剩下的桃子又平均分成五份,又多了一个,它同样把多的一个扔入海中, ...