在 Bootstrap 中，可以使用
固定表头和
滚动表体的插件来实现这个效果。以下是实现步骤：
1
. 引入必要的文件：
```
<link rel="stylesheet" href="
https://cdn
.staticfile
.org/bootstrap/4
.3
.1/css/bootstrap
.min
.css">
<script src="
https://cdn
.staticfile
.org/jquery/3
.3
.1/jquery
.min
.js"></script>
<script src="
https://cdn
.staticfile
.org/popper
.js/1
.14
.7/umd/popper
.min
.js"></script>
<script src="
https://cdn
.staticfile
.org/bootstrap/4
.3
.1/js/bootstrap
.min
.js"></script>
```
2
. 创建一个
表格，并在
表格头部添加 `thead` 标签：
```
<
table class="
table table-bordered
table-striped">
<thead>
<tr>
<th>列头1</th>
<th>列头2</th>
<th>列头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
<!-- more rows -->
</tbody>
</
table>
```
3
. 使用 JavaScript 初始化
表格，并调用插件：
```
$(function() {
$('
.table')
.fixedHeader
Table({
fixedColumn
: true
});
});
```
其中，`fixedHeader
Table` 是插件名称，`fixedColumn
: true`
表示需要
固定表头。
4
. 根据需要调整样式：
```
.table-fixed-header {
overflow-y
: auto;
max-height
: 400px;
}
.table-fixed-header thead th,
.table-fixed-header tbody td {
width
: 100px;
min-width
: 100px;
max-width
: 100px;
}
```
其中，`
.table-fixed-header` 是插件自动生成的类名，可以根据需要进行修改。
完整代码如下：
```
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap
Table 表头固定表体滚动</title>
<meta charset="utf-8">
<link rel="stylesheet" href="
https://cdn
.staticfile
.org/bootstrap/4
.3
.1/css/bootstrap
.min
.css">
<style>
.table-fixed-header {
overflow-y
: auto;
max-height
: 400px;
}
.table-fixed-header thead th,
.table-fixed-header tbody td {
width
: 100px;
min-width
: 100px;
max-width
: 100px;
}
</style>
</head>
<body>
<div class="container">
<
table class="
table table-bordered
table-striped
table-fixed-header">
<thead>
<tr>
<th>列头1</th>
<th>列头2</th>
<th>列头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
<!-- more rows -->
</tbody>
</
table>
</div>
<script src="
https://cdn
.staticfile
.org/jquery/3
.3
.1/jquery
.min
.js"></script>
<script src="
https://cdn
.staticfile
.org/popper
.js/1
.14
.7/umd/popper
.min
.js"></script>
<script src="
https://cdn
.staticfile
.org/bootstrap/4
.3
.1/js/bootstrap
.min
.js"></script>
<script src="
https://cdn
.jsdelivr
.net/npm/fixed-header-
table@1
.3
.2/dist/fixed-header-
table.min
.js"></script>
<script>
$(function() {
$('
.table')
.fixedHeader
Table({
fixedColumn
: true
});
});
</script>
</body>
</html>
```
本文分享了关于表格布局中保持表头与表体列对齐的实用技巧，详细解析了不同场景下的实现方法，适合网页设计及前端开发者参考。
扫一扫
1163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
