<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. 【翻译】Ext JS——高效的编码风格指南

    原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字 ...

  2. Adobe Premiere 基本使用

    第一节   Premiere概述 1.1概述 Premiere是Adobe公司出品的一款用于进行影视后期编辑的软件,是数字视频领域普及程度最高的编辑软件之一.对于学生媒体而言,Premiere完全可以 ...

  3. Java学习笔记(二)事件监听器

    Java实现对组件事件(如单击.输入等)的监听和JavaScript类似,都是先添加Listener,再写触发函数,不同的是,Java实现监听前必须使用implements将各个接口添加到类内. 相关 ...

  4. Logistic Regression求解classification问题

    classification问题和regression问题类似,区别在于y值是一个离散值,例如binary classification,y值只取0或1. 方法来自Andrew Ng的Machine ...

  5. 操作系统 - unix和windows下进程异同

    在UNIX系统中,只有一个系统调用可以用来创建新进程:fork.这个系统调用会创建一个与调用进程相同的副本.在调用了fork之后,这两个进程(父进程和子进程)拥有相同的存储映像.同样的环境字符串和同样 ...

  6. 【34】包含min函数的stack

    题目: 实现一个包含min函数的栈,min和push,pop都是o(1)时间 思路: 采用一个辅助的栈,来存储不同阶段的最小值 - 代码: push(int value){ //data是数据栈,mi ...

  7. Log4j.properties 配置详解

    一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...

  8. rails自动生成大量记录的方法

    因为我们可能rails new了一个网站出来,但是里面没有测试数据,我们不能傻乎乎的在new.html.erb里面一个的手动输入吧?于是我们可以写一个小的脚本来帮助在数据库中插入大量数据:高版本的ra ...

  9. 详解linux进程间通信-消息队列

    前言:前面讨论了信号.管道的进程间通信方式,接下来将讨论消息队列. 一.系统V IPC 三种系统V IPC:消息队列.信号量以及共享内存(共享存储器)之间有很多相似之处. 每个内核中的 I P C结构 ...

  10. TCP浅谈为什么3次握手

    <计算机网络>中的例子是这样的,"已失效的连接请求报文段"的产生在这样一种情况:客户发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连 ...