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来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
随机推荐
- android放大镜效果实现
概述 我相信很多用过英语应用的同学都看多一个放大镜的效果,就是选中一段文字后,会有一个放大镜,这个究竟怎么实现的呢,我们今天来分析分析. 源码分析 public class ShaderView ex ...
- Rust语言之HelloWorld
Rust语言之HelloWorld 参考文档: http://doc.crates.io/guide.html 1 什么是Cargo 相当于maven/ant之于java, automake之于c, ...
- python函数参数是值传递还是引用传递(以及变量间复制后是否保持一致):取决于对象内容可变不可变
函数参数传递本质上和变量整体复制一样,只是两个变量分别为形参a和实参b.那么,a=b后,a变了,b值是否跟着变呢?这取决于对象内容可变不可变 首先解释一下,什么是python对象的内容可变不可变? p ...
- Swift基础之UITabBarController(这是在之前UITableView中直接添加的)
这些基础内容基本已经可以搭建项目框架,剩下的就是一些优化,细节和数据请求问题,慢慢更新.... 在AppDelegate中创建方法 //创建方法执行UITabBarController func cr ...
- 【算法导论】八皇后问题的算法实现(C、MATLAB、Python版)
八皇后问题是一道经典的回溯问题.问题描述如下:皇后可以在横.竖.斜线上不限步数地吃掉其他棋子.如何将8个皇后放在棋盘上(有8*8个方格),使它们谁也不能被吃掉? 看到这个问题,最容易想 ...
- 【Qt编程】Qt学习之Window and Dialog Widgets
Qt Creator 提供的默认基类只要QMainWindow.QWidget和QDialog三种.其中,QMainWindow是带有菜单栏和工具栏的主窗口类,QDialog是各种对话框的基类,这两个 ...
- 《java入门第一季》之面向对象面试题(面向对象都做了哪些事情)
创建对象内存图解.
- hibernate 动态多数据库
最近老师给了一个任务,需求是这样的 服务器A上有一张表,里面存放了若干个服务器的信息,表的字段包括: private int id; private String serverName; privat ...
- iOS关于蓝牙连接的简单介绍与使用
下面是两台iPhone6连接同一台蓝牙设备的结果: **成功连接**** peripheral: <CBPeripheral: 0x1700f4500, identifier = 50084F6 ...
- 打印机威胁:嵌入式Web服务有安全问题
现在大多数打印机.扫描仪,以及VoIP系统等设备都会内建嵌入式的Web服务,这主要是为了方便管理.然而不幸的是,这些设备大多会由于设置问题而处在无保护状态下.有些服务甚至可以使用默认的帐号和密码访问, ...