本文详细讲解如何在 bootstrap table 中启用列宽可调整（resizable columns）功能，涵盖 cdn 资源引入、html 表格配置、javascript 初始化及关键注意事项，助你快速实现响应式、用户友好的表格列宽自定义。
本文详细讲解如何在 bootstrap table 中启用列宽可调整（resizable columns）功能，涵盖 cdn 资源引入、html 表格配置、javascript 初始化及关键注意事项，助你快速实现响应式、用户友好的表格列宽自定义。
要为 Bootstrap Table 添加列宽拖拽调整能力，需借助官方扩展插件 bootstrap-table-resizable。该扩展基于 jQuery Resizable Columns 库，与 Bootstrap Table 深度集成，无需额外 CSS/JS 逻辑即可开箱即用。
✅ 必备资源引入顺序（不可颠倒）
请严格按以下顺序引入依赖（注意：jquery.resizableColumns.min.js 必须在 bootstrap-table.min.js 之前，而 bootstrap-table-resizable.min.js 必须在最后）：
<!-- 样式 --> <link href="https://cdn.jsdelivr.net/npm/jquery.resizableColumns@0.3.1/dist/jquery.resizableColumns.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.4/dist/bootstrap-table.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 脚本（顺序关键！） --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery.resizableColumns@0.3.1/dist/jquery.resizableColumns.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.4/dist/bootstrap-table.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.4/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>
⚠️ 注意：若使用本地部署，请确保
bootstrap-table-resizable.min.js是对应 Bootstrap Table 版本的官方扩展（如 v1.22.x 对应@1.22.4），版本不匹配可能导致data-resizable="true"无效。
✅ HTML 表格结构配置
只需在 <table> 标签中添加 <code>data-resizable="true" 属性，并确保列定义完整（<th> 含 <code>data-field）：
| ID | Item Name | Item Price |
|---|
-
data-width（可选）：为每列预设初始宽度（单位为像素），提升首次渲染体验； - 所有
data-field值需与后端返回 JSON 字段名严格一致（如data-url返回的数据含"id","name","price"）。
✅ JavaScript 初始化
使用标准 Bootstrap Table 初始化方式即可自动激活 resizable 功能：
$(function() {
$('#table').bootstrapTable({
// 可选：覆盖默认行为
onPostBody: function() {
// 列宽调整完成后的回调（如需保存用户偏好）
console.log('Columns resized');
}
});
});
无需额外调用 .resizableColumns() —— bootstrap-table-resizable 会在内部自动绑定事件监听器，支持鼠标悬停显示 resize 句柄（竖直双箭头）、平滑拖拽、边界限制及 localStorage 宽度记忆（需配合 data-cookie="true" 和 data-cookie-id-table="table" 使用）。
? 实用提示与常见问题
- 兼容性：仅支持桌面端鼠标拖拽（暂不支持触摸设备）；
-
响应式冲突：禁用
data-mobile-responsive="true"或确保其不与data-resizable同时启用，避免布局错乱； -
动态列控制：若运行时增删列（如通过
refreshOptions），需手动调用$('#table').bootstrapTable('resetView')以重置 resize 句柄； -
性能优化：含大量列（>15）时建议设置
data-resizable="false"并改用固定布局，防止拖拽卡顿。
通过以上四步，你即可在几分钟内为 Bootstrap Table 添加专业级列宽调整能力，显著提升数据密集型应用的用户体验。
