如何为HTML表格实现Bootstrap Table Resizable Columns功能？求示例

前置依赖 #

要使用Bootstrap Table的列宽可调整扩展，需要先引入以下资源（注意加载顺序）：

• jQuery
• Bootstrap CSS + JS
• Bootstrap Table CSS + JS
• Bootstrap Table Resizable 扩展 JS
• jquery-resizable-columns.js（该扩展的底层依赖）

完整使用示例 #

下面是一个可直接运行的完整页面示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Table 可调整列宽示例</title>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <!-- 引入Bootstrap Table CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table.min.css">
  <!-- 引入jquery-resizable-columns的CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.css">
</head>
<body>
  <div class="container mt-4">
    <!-- 定义Bootstrap Table -->
    <table id="resizableTable" data-toggle="table" data-url="https://examples.bootstrap-table.com/json/data1.json" data-resizable="true">
      <thead>
        <tr>
          <th data-field="id">ID</th>
          <th data-field="name">名称</th>
          <th data-field="price">价格</th>
          <th data-field="operate">操作</th>
        </tr>
      </thead>
    </table>
  </div>

  <!-- 引入jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <!-- 引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <!-- 引入jquery-resizable-columns.js -->
  <script src="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.js"></script>
  <!-- 引入Bootstrap Table JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table.min.js"></script>
  <!-- 引入Bootstrap Table Resizable扩展JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>
</body>
</html>

关键配置说明 #

1. 通过HTML属性启用：在table标签上添加data-resizable="true"，即可开启列宽可调整功能。
2. 通过JS初始化配置：如果更倾向于JS控制，可移除table上的data-toggle="table"和data-resizable="true"，改用以下代码初始化：

$(function() {
  $('#resizableTable').bootstrapTable({
    url: 'https://examples.bootstrap-table.com/json/data1.json',
    resizable: true,
    columns: [
      { field: 'id', title: 'ID' },
      { field: 'name', title: '名称' },
      { field: 'price', title: '价格' },
      { field: 'operate', title: '操作' }
    ]
  });
});

注意事项 #

• 确保所有依赖资源加载顺序正确：jQuery → 基础Bootstrap资源 → jquery-resizable-columns → Bootstrap Table核心 → Resizable扩展。
• 调整列宽时，鼠标悬停在列标题的边框处会出现调整光标，按住拖动即可改变列宽。
• 如果需要自定义调整行为，可参考官方文档中的配置项（比如设置最小列宽、调整后的回调事件等）。

内容的提问来源于stack exchange，提问作者Luca Esposito