bootstrap table thead固定,tbody垂直滚动条
时间: 2024-01-28 21:13:35 浏览: 160
bootstrap表格固定表头并且tbody部分添加滚动条
4星 · 用户满意度95%
要实现 Bootstrap Table 的表头固定,而表体(tbody)部分带有垂直滚动条,可以通过以下步骤完成:
1. 在表格外层添加一个 div 容器,并设置样式 position: relative。
2. 在 div 容器内部添加一个固定位置的表头(thead)元素,并设置样式 position: absolute 和 top: 0。
3. 在 div 容器内部再添加一个滚动容器(overflow: auto),并将表体(tbody)元素放置其中。
4. 设置滚动容器的高度(height),使其可以出现垂直滚动条。
5. 在表格中设置固定宽度(width),以保证表头和表体的列宽一致。
以下是一个示例代码:
```
<div style="position: relative;">
<table class="table" style="width: 100%;">
<thead style="position: absolute; top: 0;">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
</table>
<div style="height: 200px; overflow: auto;">
<table class="table" style="width: 100%;">
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<!-- more rows... -->
</tbody>
</table>
</div>
</div>
```
请注意,以上示例代码仅供参考,具体实现方式可能因为 Bootstrap Table 的版本和样式等因素而有所不同。
阅读全文