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来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
随机推荐
- (十五)UITableViewCell的常见属性
UItableViewCellStyle: typedef NS_ENUM(NSInteger, UITableViewCellStyle) { UITableViewCellStyleDefault ...
- centos vsftpd 553 Could not create file解决方法
centos vsftpd 553 Could not create file解决方法 问题由于selinux引起的,问题解决办法: www.2cto.com 输入:getsebool - ...
- react-native-android之初次相识
作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒. 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开发周期长,开发成本高,升级代价大的语言一定会 ...
- saiku运行时报错max_length_for_sort_data 需要set higher
infiniDB或者mysql数据库,运行时,按某个字段排序会出错.报错:max_length_for_sort_data ... set higher. saiku报错, 也是这样. 这是数 ...
- SpriteBuilder中的粒子系统属性
一个粒子发射器可以有2种模式,放射状和重力的(radial or gravity) 放射状模式允许你去使用发射器创建粒子旋涡状环绕在指定位置的效果. 当启用重力效果,你可以使得粒子在任何方向任意飞行, ...
- 个人Source Insight使用设置笔记
1.打开SourceInsight, 在菜单栏中点击Options-->Document Options 在显示的对话框中,点击Screen Fonts...., 可改变这个项目的字体,我选的是 ...
- How I Turned Down $300,000 from Microsoft to go Full-Time on GitHub
How I Turned Down $300,000 from Microsoft to go Full-Time on GitHub (我是如何拒绝微软30w的诱惑,专注于GitHub事业) 当我老 ...
- Course2-Python函数和模块
一. 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率. 上一课里提到了Python的很多内置函数.在此主要讲自定义函数. 1. 定 ...
- python之多继承与__mro__的使用
1 class Base(object): def text(self): print('------text-----') class A(Base): def text(self): print( ...
- IT轮子系列(五)——MVC API 文件上传,总有一款是你需要的
前言 在对外提供的接口时,也常常需要提供上传文件的.在这篇文章中会描述三种上传方式. 1.第一款,通过Base64字符上传——PostFromBase64Str 首先,定义上传数据模型.对于模型的定义 ...