bootstrap table表头宽度拖动，固定表头

可以使用 Bootstrap Table 的 built-in 功能来实现表头宽度拖动和固定表头。

首先，你需要添加以下 JavaScript 和 CSS 文件：

<!-- bootstrap-table CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.css">

<!-- bootstrap-table JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>

<!-- bootstrap-table-fixed-header CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table-fixed-header/1.4.0/bootstrap-table-fixed-header.min.css">

<!-- bootstrap-table-fixed-header JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table-fixed-header/1.4.0/bootstrap-table-fixed-header.min.js"></script>

接下来，你需要在表格中添加 `data-fixed-columns="true"` 和 `data-fixed-number="1"` 属性来实现固定表头：

<table id="table" data-fixed-columns="true" data-fixed-number="1">
  <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="actions">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Product 1</td>
      <td>$10</td>
      <td>Edit/Delete</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Product 2</td>
      <td>$20</td>
      <td>Edit/Delete</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Product 3</td>
      <td>$30</td>
      <td>Edit/Delete</td>
    </tr>
  </tbody>
</table>

最后，你需要在 JavaScript 中初始化表格并启用拖动表头的功能：

$(function() {
  $('#table').bootstrapTable({
    fixedHeader: true
  });
});

现在，你就可以在表格中拖动表头来调整列宽，并可以看到表头被固定在顶部。