bootstrap table 实现表头固定，列宽可拖动改变宽度大小

Bootstrap Table 是一个功能强大的 jQuery 表格插件，可以实现表格的排序、分页、搜索、编辑、导出等功能。要实现表头固定，以及列宽可拖动改变宽度大小，可以通过以下步骤实现：

1. 引入 Bootstrap Table 插件和相关样式文件。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/editable/bootstrap-table-editable.min.js"></script>

2. 在表格标签中加入 data-height 属性，设置表格高度，并加入 data-fixed-columns 属性，设置固定列数。

<table id="table" data-height="400" data-fixed-columns="3">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Name</th>
      <th data-field="price" data-sortable="true">Price</th>
      <th data-field="operate">Operate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>$1</td>
      <td><button class="btn btn-primary">Edit</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item 2</td>
      <td>$2</td>
      <td><button class="btn btn-primary">Edit</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Item 3</td>
      <td>$3</td>
      <td><button class="btn btn-primary">Edit</button></td>
    </tr>
  </tbody>
</table>

3. 在 JavaScript 文件中，使用 bootstrapTable 函数初始化表格，并加入 fixedColumns 和 resizable 属性，分别设置固定列和可改变列宽。

$(function() {
  $('#table').bootstrapTable({
    fixedColumns: true,
    resizable: true
  });
});

这样就可以实现表头固定，以及列宽可拖动改变宽度大小的功能了。