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. 需要实现的是:表格头部固定,并且支持水平滚 ...
随机推荐
- Python 基本数据类型_常用功能整理
一.字符串 字符串 s ="axle" #去两端空格 s.split() #以什么开头 s.startswith("a") #查找子序列,"12&qu ...
- VR全景智慧城市-梦幻城市降临
有人说,创业分为两种,一种是富创业,一种是穷创业! 什么是富创业呢?就是拿钱砸,我觉得这种说法有点荒唐,为什么创业,因为没钱才会去创业,有钱的那不叫创业的,那是拿钱投资点项目. 看看老一辈的富豪,不都 ...
- PHP中的运算符
一.算术运算符 运算符 名称 描述 实例 结果 x + y 加 x 和 y 的和 2 + 2 4 x - y 减 x 和 y 的差 5 - 2 3 x * y 乘 x 和 y 的积 5 * 2 1 ...
- PC端网页的基本构成
首先,一个前端最基本的就是排网页,有人会看不起拍页面,认为不就是排一个页面嘛,有啥的,分分钟的事,可是他不知道的是,一个网页中也包含了很多内容,像我们如果不理解margin,padding,会经常对我 ...
- [原创]nagios搭建配置
nagios搭建配置 一.环境 ubuntu 14.04系统 host1:172.17.0.2 serverhost2:172.17.0.3 client 二.安装 1.在两个主机上都执行一下命令: ...
- Sqoop简介及安装
Hadoop业务的大致开发流程以及Sqoop在业务中的地位: Sqoop概念 Sqoop可以理解为[SQL–to–Hadoop],正如名字所示,Sqoop是一个用来将关系型数据库和Hadoop中的数据 ...
- 如何编写Hexo主题
完成一个Hexo的主题其实很简单,和写静态页面差不多,只是内容部分通过Hexo的变量去获取,而且Hexo还内置了一些辅助函数帮你快速方便地完成繁琐的处理. 起步 在写代码之前要先把项目结构搭建好,一个 ...
- hdu3622
hdu3622 题意 每回合给定两个坐标点,可以选择一个放置炸弹,自己决定炸弹的半径,问 n 个回合后,使炸弹半径最小值最大. 分析 存在对立关系:每回合只能选择一个地方放置炸弹.i 表示 第一个位置 ...
- profiler内存优化:警惕回调函数
最近做profiler内存优化,踩了一个深坑,觉得有必要做一下笔记. 过程是这样的,游戏启动后,会启动更新模块,加载更新界面,更新检测完成后会切换场景进入登陆界面.切换场景会自动释放上一个场景的资源. ...
- iptables实用教程(二):管理链和策略
概念和原理请参考上一篇文章"iptables实用教程(一)". 本文讲解如果管理iptables中的链和策略. 下面的代码格式中,下划线表示是一个占位符,需要根据实际情况输入参数, ...