本文详细讲解如何在 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 表格结构配置
只需在 使用标准 Bootstrap Table 初始化方式即可自动激活 resizable 功能： 无需额外调用 通过以上四步，你即可在几分钟内为 Bootstrap Table 添加专业级列宽调整能力，显著提升数据密集型应用的用户体验。 标签中添加
data-resizable="true" 属性，并确保列定义完整（ 含 data-field）：@@######@@
ID
Item Name
Item Price
data-width（可选）：为每列预设初始宽度（单位为像素），提升首次渲染体验；data-field 值需与后端返回 JSON 字段名严格一致（如 data-url 返回的数据含 "id", "name", "price"）。✅ JavaScript 初始化
.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 句柄；data-resizable="false" 并改用固定布局，防止拖拽卡顿。
$(function() {
$('#table').bootstrapTable({
// 可选：覆盖默认行为
onPostBody: function() {
// 列宽调整完成后的回调（如需保存用户偏好）
console.log('Columns resized');
}
});
});
