Bootstrap 表的固定标头
在 Bootstrap 3 中，创建具有固定标头的表需要纯 CSS 解决方案。以下步骤将指导您完成该过程：
-
应用 CSS 类： 将以下 CSS 类添加到表中：
- .tableFixHead 指向包含的 div
- .tableFixHead thead th 到表头单元格
-
CSS 样式： 插入以下 CSS 样式：
1 2 | .tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
|
登录后复制
-
HTML结构： 确保您的表格具有适当的 HTML结构：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="tableFixHead">
<table class="table">
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
|
登录后复制
通过实施此解决方案，桌头将保持固定在桌子顶部，允许正文垂直滚动。
以上是如何仅使用 CSS 为 Bootstrap 3 表创建固定标头？的详细内容。更多信息请关注PHP中文网其他相关文章！
