<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放大镜效果实现

    概述 我相信很多用过英语应用的同学都看多一个放大镜的效果,就是选中一段文字后,会有一个放大镜,这个究竟怎么实现的呢,我们今天来分析分析. 源码分析 public class ShaderView ex ...

  2. Rust语言之HelloWorld

    Rust语言之HelloWorld 参考文档: http://doc.crates.io/guide.html 1 什么是Cargo 相当于maven/ant之于java, automake之于c, ...

  3. python函数参数是值传递还是引用传递(以及变量间复制后是否保持一致):取决于对象内容可变不可变

    函数参数传递本质上和变量整体复制一样,只是两个变量分别为形参a和实参b.那么,a=b后,a变了,b值是否跟着变呢?这取决于对象内容可变不可变 首先解释一下,什么是python对象的内容可变不可变? p ...

  4. Swift基础之UITabBarController(这是在之前UITableView中直接添加的)

    这些基础内容基本已经可以搭建项目框架,剩下的就是一些优化,细节和数据请求问题,慢慢更新.... 在AppDelegate中创建方法 //创建方法执行UITabBarController func cr ...

  5. 【算法导论】八皇后问题的算法实现(C、MATLAB、Python版)

    八皇后问题是一道经典的回溯问题.问题描述如下:皇后可以在横.竖.斜线上不限步数地吃掉其他棋子.如何将8个皇后放在棋盘上(有8*8个方格),使它们谁也不能被吃掉?         看到这个问题,最容易想 ...

  6. 【Qt编程】Qt学习之Window and Dialog Widgets

    Qt Creator 提供的默认基类只要QMainWindow.QWidget和QDialog三种.其中,QMainWindow是带有菜单栏和工具栏的主窗口类,QDialog是各种对话框的基类,这两个 ...

  7. 《java入门第一季》之面向对象面试题(面向对象都做了哪些事情)

    创建对象内存图解.

  8. hibernate 动态多数据库

    最近老师给了一个任务,需求是这样的 服务器A上有一张表,里面存放了若干个服务器的信息,表的字段包括: private int id; private String serverName; privat ...

  9. iOS关于蓝牙连接的简单介绍与使用

    下面是两台iPhone6连接同一台蓝牙设备的结果: **成功连接**** peripheral: <CBPeripheral: 0x1700f4500, identifier = 50084F6 ...

  10. 打印机威胁:嵌入式Web服务有安全问题

    现在大多数打印机.扫描仪,以及VoIP系统等设备都会内建嵌入式的Web服务,这主要是为了方便管理.然而不幸的是,这些设备大多会由于设置问题而处在无保护状态下.有些服务甚至可以使用默认的帐号和密码访问, ...