bootstrap table表头宽度拖动,固定表头
时间: 2023-06-16 20:05:59 浏览: 86
Bootstrap Table默认是不支持表头宽度拖动的,但可以使用第三方插件Resizable进行实现。
首先需要在页面中引入Resizable插件的CSS和JS文件:
```html
<link href="https://unpkg.com/bootstrap-table-resizable/dist/bootstrap-table-resizable.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table-resizable/dist/bootstrap-table-resizable.min.js"></script>
```
然后在初始化Bootstrap Table时,添加resizable属性:
```javascript
$('#table').bootstrapTable({
resizable: true,
//其他参数
});
```
接下来需要将表头固定,可以使用Bootstrap Table自带的fixedHeader属性来实现:
```javascript
$('#table').bootstrapTable({
resizable: true,
fixedHeader: true,
//其他参数
});
```
最后,我们需要在CSS中设置表头的样式,使其固定在顶部:
```css
.fixed-table-header {
position: sticky;
top: 0;
z-index: 1;
background-color: #fff;
}
```
这样就可以实现Bootstrap Table表头宽度拖动,并固定表头的效果了。