bootstrap-table 列宽问题解决
<th style="width:120px" data-field="Cel1"><div class="th-inner ">列名</div><div class="fht-cell"></div></th>
以上为BootStrap-Table 生成的列 我发现这个widtn 不生效 尝试在 设置样式 .th-inner 的宽度 成功了 于是 给出以下解决方案
首先创建一个样式
.W120 .th-inner {
width:120px !important;
}
.W80 .th-inner {
width:80px !important;
}
.W60 .th-inner {
width:60px !important;
}
.W150 .th-inner {
width:150px !important;
}
然后在 指定 columns 参数时 给要指定长度的列添加class
{
class: 'W120',
field: 'OPERATETIME',
title: '盘点时间'
}
<table id="table"></table>
<style>
.W120 .th-inner {
width:120px !important;
}
.W80 .th-inner {
width:80px !important;
}
.W60 .th-inner {
width:60px !important;
}
.W150 .th-inner {
width:150px !important;
}
</style>
<script>
$('#table').bootstrapTable({
columns: [{
field: 'id',
class:'W60'
title: 'Item ID'
}, {
field: 'name',
class:'W80'
title: 'Item Name'
}, {
field: 'price',
class:'W120'
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
</script>
bootstrap-table 列宽问题解决的更多相关文章
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- 关于如何解决bootstrap table 列 切换 刷新 高度不一样
在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...
- bootstrap table 列求和
<div class="modal fade in" id="_modalDialog" tabindex="1" role=&quo ...
- layui table 列宽百分比显示
var layer = layui.layer, form = layui.form, table = layui.table; var $ = layui.$; /*select gysmc,zyz ...
- BootStrap的table技术小结:数据填充、分页、列宽可拖动
本文结构:先说明,后代码.拷贝可直接运行. 一.demo结构: 二.文件引入 这些里面除了下面2个比较难找,其他的都很好找 bootstrap-table-resizable.js colResiza ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- JS可改变列宽table
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...
- table列等宽
固定table列等宽 固定table列等宽 style: {table-layout : fixed} html: style="table-layout:fixed" js: o ...
- display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
随机推荐
- Linux下ipconfig分析及C语言实现
在linux下使用ifconfigl命令能很方便的查看网卡与网线是否连通,运行ifconfig eth0命令大致输出如下: # ifconfig eth0 eth0 Link encap:Ethern ...
- CE6.0 下获得 SD 卡序列号的方法
经常在坛子里看到讨论软件加密的帖子,纯软件加密与读取硬件序列号加密是经常讨论到的. 两种方法各有优缺点. 在通过读取硬件序列号的方法来加密的方法,受硬件的限制. 一般来说,CPU和T-Flash可能存 ...
- Java-HttpSession
//session给用户一种标志,让用户可以在不同页面以及网站中都有一个特殊的标记 public interface HttpSession { /** * Returns the time when ...
- EBS-子库存转移和物料搬运单区别
FROM:http://bbs.erp100.com/forum.php?mod=viewthread&tid=261550&extra=page%3D7 EBS-子库存转移和物料搬运 ...
- OpenCV——PS 图层混合算法 (三)
具体的算法原理可以参考 PS图层混合算法之三(滤色, 叠加, 柔光, 强光) // PS_Algorithm.h #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ ...
- MR PAGERANK思路
map( key: [url, pagerank], value: outlink_list ) for each outlink in outlink_list emit( key: outlink ...
- unix设计哲学
说到Unix为我们所带来的软件开发的哲学,我必需要说一说.Unix遵循的原则是KISS(Keep it simple, stupid).在http://en.wikipedia.org/wiki/Un ...
- LeetCode(51)- Count and Say
题目: The count-and-say sequence is the sequence of integers beginning as follows: 1, 11, 21, 1211, 11 ...
- 恶补web之一:html学习(1)
发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...
- 学习Selenium遇到的问题和解决方案
问题1:IE驱动位数问题,未安装对应的IE,打不开IE浏览器(已解决20180323) 使用Selenium启动IE浏览器的时候,报错,报错信息如下 org.openqa.selenium.remot ...