bootstrap table固定表头
时间: 2023-08-29 12:05:27 浏览: 131
bootstrap-table表头固定(全局)
要在 Bootstrap Table 中固定表头,可以使用插件 `bootstrap-table-fixed-header`。以下是实现步骤:
1. 引入必要的文件:`jquery.min.js`、`bootstrap.min.css`、`bootstrap.min.js`和`bootstrap-table-fixed-header.min.js`。
```html
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.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-fixed-header/1.5.1/bootstrap-table-fixed-header.min.js"></script>
```
2. 在表格中添加 `thead` 元素,并为表格添加 `data-fixed-header="true"` 属性。
```html
<table id="table" data-fixed-header="true">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>项目1</td>
<td>这是项目1的描述</td>
</tr>
<tr>
<td>2</td>
<td>项目2</td>
<td>这是项目2的描述</td>
</tr>
<tr>
<td>3</td>
<td>项目3</td>
<td>这是项目3的描述</td>
</tr>
</tbody>
</table>
```
3. 初始化表格并调用 `fixedHeader` 方法。
```javascript
$(function() {
$('#table').bootstrapTable();
$('#table').fixedHeader();
});
```
这样就可以实现表格的固定表头效果了。需要注意的是,如果表格中有合并单元格的情况,这种方法可能会失效。
阅读全文