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来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
随机推荐
- 用m4 macros创建文本文件
用m4 macros创建文本文件 原文链接: http://ldp.linux.no/linuxfocus/ChineseGB/September1999/article111.html 补充阅读 ...
- CSS3 Media Queries 简介
原文链接:Introduction to CSS3 Media Queries 原文日期: 2014年2月21日 翻译日期: 2014年2月26日 翻译人员: 铁锚 简介 随着移动设备的日益普及,we ...
- 【65】Mybatis详解
Mybatis介绍 MyBatis是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架.MyBatis几乎消除了所有的JDBC代码,也基本不需要手工去设置参数和获取检索结果.MyBatis能够 ...
- 苹果新的编程语言 Swift 语言进阶(十六)--泛型
泛型允许你定义一个宽松.可重用的函数或者类型,使用泛型能够避免代码的重复,也能以更清楚和抽象的方式来表达程序的意图. 泛型是Swift语言提供的强大功能之一,Swift提供的许多标准库都使用了泛型来创 ...
- C语言之linux内核--BCD码转二进制与二进制转BCD码(笔试经典)
在分析代码之前,我们先来了解一下,BCD码和二进制到底区别在哪? 学习过计算机原理的和数字电子技术这两门课的都会知道这两个到底是什么含义,也有的同学学过了,考过了,过了一段时间又忘记了,今天,我们通过 ...
- Android Xlistview的源码浅度分析 监听ListView上下滑动 以及是否到顶和底部
如转载 请注明出处 http://blog.csdn.net/sk719887916 比如我们很多项目中会用到listview 并且要对listview滑动方向进行判断 也有需要的到listview是 ...
- SharePoint 2010 -- .Net托管客户端模型简单示例
.Net托管客户端模型,是SharePoint2010推出的三种客户端模型".NET托管"."ECMAScript"."Sliverlight&quo ...
- linux下64位汇编的系统调用(3)
背景知识基本交代清楚了,下面我们实际写一个小例子看一下.代码的功能很简单,显示一行文本,然后退出.我们使用了syscall中的write和exit调用,查一下前面的调用号和参数,我们初步总结如下: w ...
- obj-c编程10:Foundation库中类的使用(5)[时间对象]
隔了好久才有了这新的一篇,还是无奈的时间啊!so这次我们就着重谈谈它喽. F库中有很多时间相关的类,比如NSDate,NSTimeInterval,NSTimeZone,NSDateComponent ...
- C#解析HTML利器-Html Agility Pack
今天刚开始做毕设....好吧,的确有点晚.我的毕设设计需要爬取豆瓣的电影推荐,于是就需要解析爬取下来的html,之前用Python玩过解析,但目前我使用的是C#,我觉得C#不比python差,有微软大 ...