<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 应用开发】Android 网络编程 API笔记 - java.net 包 权限 地址 套接字 相关类 简介

    Android 网络编程相关的包 : 9 包, 20 接口, 103 类, 6 枚举, 14异常; -- Java包 : java.net 包 (6接口, 34类, 2枚举, 12异常); -- An ...

  2. 【一天一道LeetCode】#52. N-Queens II

    一天一道LeetCode系列 (一)题目 Follow up for N-Queens problem. Now, instead outputting board configurations, r ...

  3. android重启代码

    首先新建一个app然后添加 android:sharedUserId="android.uid.system" 再添加重启的权限 <uses-permission andro ...

  4. android 屏幕适配,hdpi,xhdpi,xxhdpi理解,常见出图

    屏幕适配 首先理解下各个尺寸单位代表的意思 尺寸含义 px: 像素 dip: Density-independent pixel 独立像素密度 dpi: dot per inch 分辨率 ppi: p ...

  5. LeetCode之“链表”:Rotate List

    题目链接 题目要求: Given a list, rotate the list to the right by k places, where k is non-negative. For exam ...

  6. Android监听电池状态

    监听电池状态只需要接收Intent.ACTION_BATTERY_CHANGED的广播即可,当电池状态发生变化时会发出广播. 1.运行状态如下图: (1)连接USB时的状态 (2)断开USB时的状态 ...

  7. DB 查询分析器 6.03 ,遨游于任何Windows操作系统之上的最优秀的数据库客户端工具

    DB 查询分析器 6.03 ,遨游于任何Windows操作系统之上的最优秀的数据库客户端工具 中国本土程序员马根峰(CSDN专访马根峰:海量数据处理与分析大师的中国本土程序员  .03版本已经完全兼容 ...

  8. LeetCode之“数学”:Rectangle Area

    题目链接 题目要求: Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle i ...

  9. Linux常见压缩命令 - gzip,zcat,bzip2,bzcat

    几个常见的压缩文件扩展名 *.Z compress 程序压缩的文件: *.gz gzip 程序压缩的文件: *.bz2 bzip2 程序压缩的文件: *.tar tar 程序打包的数据,并没有压缩过: ...

  10. 面试之路(10)-BAT面试之java实现单链表的插入和删除

    链表的结构: 链表在空间是不连续的,包括: 数据域(用于存储数据) 指针域(用于存储下一个node的指针) 单项链表的代码实现: 节点类 构造函数 数据域的get,set方法 指针域的get,set方 ...