bootstrap-table 列宽问题解决
2024-03-25 10:39:25
<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>
最新文章
- ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
- Spark源码学习1.2——TaskSchedulerImpl.scala
- 转：Directshow开发的一些例子
- 在Eclipse设置打开项目或文件目录
- iOS开发:JavaScriptCore.framework的简单使用--JS与OC的交互篇
- java的nio之：java的nio系列教程之DatagramChannel
- 剑指OFFER之栈的压入、弹出序列（九度OJ1366）
- 表达式 - PHP手册笔记
- 一文搞定FastDFS分布式文件系统配置与部署
- 实现鼠标hover动画效果自己理解的两种方法——练习笔记
- 结合apache安装subversion
- Spring data mongodb 聚合,投射,内嵌数组文档分页.
- win10蓝屏，windbg的使用
- QWidget设置背景颜色
- 【XMPP】基于XMPP的即时通讯解决方案
- HDU 3183 - A Magic Lamp - [RMQ][ST算法]
- [洛谷P1417 烹调方案]贪心+dp
- python学习笔记_week19
- 27_网络编程-初识socket
- JQuery之ContextMenu(右键菜单)