在之前做过的一个web项目中，前端表格是基于jQuery和Bootstrap Table做的，客户要求能利用拖动改变列宽，为了总结和备忘，现将实现的过程记录如下：
1. Bootstrap Table可拖动，需要用到它的Resizable扩展插件，具体可见bootstrap-table的官方文档链接： http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/
进入之后，找到Resizable插件，点击Home进入github可以找到详细的用法。
2. 用法是直接引入该js插件，不过可以看到，这个插件还依赖于colResizable v1.6（下载地址： http://www.bacubacu.com/colresizable/ ）
< src="colResizable-1.6.min.js"></ > < src="extensions/bootstrap-table-resizable.js"></ >
3. 另外，在使用Bootstrap Table的时候，建议用js去设置table的列属性，即按照如下方式：
$('#myTable').bootstrapTable({
url: url,
method: 'post',
columns:[{
align: 'center',
checkbox:true,
width:'15',
valign: 'middle'
},{
field: 'name',
: '名称',
align: 'center',
width:'100',
valign: 'middle'
},{
field: 'desc',
: '描述',
width:500,
align: 'left',
valign: 'middle'
}]
});
上面这种方式可以通过修改width的大小来直接修改列的宽度。而还有一种写法是在HTML中设置table的列头部，这种方式是很难调整宽度的，且很容易导致列头与内容无法对齐，是不推荐的，例如：
<thead>
<tr>
<th data-field="id" data-width="50px">编号</th>
<th data-field="name" data-width="100px">姓名</th>
<th data-field="desc" data-width="120px">描述</th>
</tr>
</thead>
总结
以上所述是小编给大家介绍的Bootstrap Table列宽拖动的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
继续阅读与本文标签相同的文章
下一篇 :
Slack悄悄地添加了自动过期的状态
-
AliOS Things 维测高阶能力之数据断点（DWT）使用
2026-05-17栏目： 教程
-
Linux系统：centos7下搭建ZooKeeper3.4中间件，常用命令总结
2026-05-17栏目： 教程
-
《菜鸟程序员成长之路：从技术小白到阿里巴巴Java工程师》
2026-05-17栏目： 教程
-
JavaScript ~ 排序算法（选择排序）
2026-05-17栏目： 教程
-
IntelliJ IDEA 创建 Git 分支并且 Push 到远程
2026-05-17栏目： 教程