bootstrap table表头宽度拖动,固定表头
时间: 2023-06-16 18:05:44 浏览: 105
可以使用 Bootstrap Table 的一个插件 resizable.js,它可以实现表头宽度拖动和固定表头的功能。下面是一个简单的示例:
1. 引入插件和样式文件
```html
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/resizable/bootstrap-table-resizable.min.js"></script>
```
2. 创建表格
```html
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="id" data-resizable="true">ID</th>
<th data-field="name" data-resizable="true">名称</th>
<th data-field="price" data-resizable="true">价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>苹果</td>
<td>5元/斤</td>
</tr>
<tr>
<td>2</td>
<td>香蕉</td>
<td>3元/斤</td>
</tr>
<tr>
<td>3</td>
<td>橙子</td>
<td>4元/斤</td>
</tr>
</tbody>
</table>
```
3. 初始化表格
```javascript
$(function() {
$('#table').bootstrapTable({
resizable: true
});
});
```
在表头 th 标签中添加 data-resizable="true" 属性即可开启宽度拖动功能,同时在初始化表格时添加 resizable: true 参数即可开启固定表头功能。
示例代码:https://codepen.io/anon/pen/LwvYyo
阅读全文