<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 列宽问题解决的更多相关文章

  1. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  2. 关于如何解决bootstrap table 列 切换 刷新 高度不一样

    在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...

  3. bootstrap table 列求和

    <div class="modal fade in" id="_modalDialog" tabindex="1" role=&quo ...

  4. layui table 列宽百分比显示

    var layer = layui.layer, form = layui.form, table = layui.table; var $ = layui.$; /*select gysmc,zyz ...

  5. BootStrap的table技术小结:数据填充、分页、列宽可拖动

    本文结构:先说明,后代码.拷贝可直接运行. 一.demo结构: 二.文件引入 这些里面除了下面2个比较难找,其他的都很好找 bootstrap-table-resizable.js colResiza ...

  6. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  7. JS可改变列宽table

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  8. table列等宽

    固定table列等宽 固定table列等宽 style: {table-layout : fixed} html: style="table-layout:fixed" js: o ...

  9. display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

    发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...

随机推荐

  1. H5学习之旅-H5的布局(10)

    两种实现方式:div和table div实现布局的方式 代码实例 <!DOCTYPE html> <html lang="en"> <head> ...

  2. UVa - 102 - Ecological Bin Packing

    Background Bin packing, or the placement of objects of certain weights into different bins subject t ...

  3. (二十六)静态单元格(Cell)

    制作类似iOS系统设置的页面,如果使用代码来实现,将会比较麻烦,可以通过静态单元格技术方便的实现. 注意:静态单元格只支持TableViewController. 可以通过storyboard直接操作 ...

  4. 知名IT公司的年度大会合集

    很多知名的IT公司都有年度大会,比如说谷歌,微软,Adobe,甲骨文,苹果等等.在这些公司的年度大会上,都会展示一些公司比较前沿的产品.看看这些大会的视频(也可以参会,但是门票可是非常贵的),对我们了 ...

  5. 【翻译】使用新的Sencha Cmd 4命令app watch

    原文:http://www.sencha.com/blog/using-the-new-app-watch-command-in-sencha-cmd-4/ 作者:Don Griffin Don Gr ...

  6. J2EE进阶(一)随堂笔记

    进公司搞研发,基本上用的都是J2EE框架.若想在公司混个不错的地位,首先技术上必须过关.由于需求所致,自己学习了J2EE一段时间,主要是Struts2,MyBatis(Hibernate的前身),远远 ...

  7. Unix - 文件中构成一个空洞的分析

    lseek函数显示地为一个打开文件设置偏移量,文件偏移量可以大于文件的当前长度,在这种情况下,对该文件的下一次写将加长该文件,并在文件中构成一个空洞,这一点是允许的.位于文件中但没有写过的字节都被读为 ...

  8. PHP 查询脚本

    POST查询以表格传参数支持中文,GET不支持. POST查询: <?php $id=$_POST["id"];//id(中括号)为传来的参数,$id为php中的变量 //l ...

  9. Linux磁盘 - fdisk,partprobe, mkfs, mke2fs, fsck, badblocks, mount, mknod

    磁盘分区: fdisk [root@www ~]# fdisk [-l] 装置名称 选项与参数: -l :输出后面接的装置所有的 partition 内容.若仅有 fdisk -l 时, 则系统将会把 ...

  10. LeetCode(68)-Compare Version Numbers

    题目: Compare two version numbers version1 and version2. If version1 > version2 return 1, if versio ...