bootstrap table 设置了高度,实现列表宽度可拖动
时间: 2023-06-19 15:05:59 浏览: 200
bootstrapTable实现列宽可拖动
可以使用 bootstrap-table-resizable 插件来实现表格列宽度可拖动。
首先,在 HTML 中引入以下资源:
```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.12.1/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table-resizable/0.1.2/bootstrap-table-resizable.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.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table-resizable/0.1.2/bootstrap-table-resizable.min.js"></script>
```
然后,在 JavaScript 中初始化表格,并启用可拖动列宽度的功能:
```javascript
$(function() {
$('#table').bootstrapTable({
height: 400, // 设置表格高度
resizable: true, // 启用列宽度可拖动
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '名称'
}, {
field: 'price',
title: '价格'
}]
});
});
```
最后,在 HTML 中添加表格元素:
```html
<table id="table"></table>
```
这样就可以实现表格列宽度可拖动的效果了。
阅读全文