<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. Android 使用com.j256.ormlite

    在web开发中经常采用的hibernate,在android也提供了一个ormlite 导入所需jar包后 /** * SQLiteHelperOrm.java * 版权所有(C) 2014 * 创建 ...

  2. Linux Shell 命令--rename

    重命名文件,经常用到mv命令,批量重命名文件rename是最好的选择,Linux的rename 命令有两个版本,一个是C语言版本的,一个是Perl语言版本的,判断方法:输入man rename 看到第 ...

  3. (NO.00002)iOS游戏精灵战争雏形(二)

    在SpriteBuilder中新建Images文件夹,将所需要的图片素材全部拖入其中: 别忘了将其转换为智能精灵图表文件夹. 因为我们不需要为ipad和安卓设计,所以在项目设置里将所有出iphone以 ...

  4. ListView中ConvertView和ViewHolder

    1.概述 ListView是Android中非常常见的控件通过Adapter架起数据与界面显示的桥梁,MVC思想在其中得到了很好地体现: M:model 数据模型    添加到ListView中显示的 ...

  5. XBMC源代码分析 1:整体结构以及编译方法

    XBMC(全称是XBOX Media Center)是一个开源的媒体中心软件.XBMC最初为Xbox而开发,可以运行在Linux.OSX.Windows.Android4.0系统.我自己下载了一个然后 ...

  6. Dynamics CRM 修改自定义实体名字及属性前缀(架构名称)

    本文章以2013为例(2011同理,4.0比较简单直接在系统设置的自定义中设置即可). 1.设置-->自定义项-->发布者,下图中的红框内的即为需要设置的前缀. 2.设置-->解决方 ...

  7. Hadoop家族

    现在Hadoop家族产品,已经达到20个了之多. 有必要对自己的知识做一个整理了,把产品和技术都串起来.不仅能加深印象,更可以对以后的技术方向,技术选型做好基础准备. 本文为"Hadoop家 ...

  8. IOS 与ANDROID框架及应用开发模式对比一

    IOS 和ANDROID操作系统都是目前流行的移动操作系统,被移动终端和智能设备大量采用,两者都采用了先进的软件技术进行设计,为了方便应用开发两者都采用了先进的设计模式.两者在框架设计上都采用了什么技 ...

  9. mahout系列----Dirichlet 分布

    Dirichlet分布可以看做是分布之上的分布.如何理解这句话,我们可以先举个例子:假设我们有一个骰子,其有六面,分别为{1,2,3,4,5,6}.现在我们做了10000次投掷的实验,得到的实验结果是 ...

  10. LeetCode之旅(15)-Odd Even Linked List

    题目描述: Given a singly linked list, group all odd nodes together followed by the even nodes. Please no ...