如何在Bootstrap 4中实现表格表头固定悬浮不跟随内容滚动

直接通过原生CSS的sticky定位实现，无需引入额外插件，修改成本极低： #

1. 新增自定义CSS样式 #

将以下代码加入你的样式文件或页面<style>标签中：

/* 定义表格滚动容器 */
.table-scroll-wrapper {
    max-height: 450px; /* 可根据页面需求自定义滚动区域高度 */
    overflow-y: auto;
}
/* 表头固定核心样式 */
.table-scroll-wrapper thead th {
    position: sticky;
    top: 0;
    background: #ffffff; /* 必须设置背景色，避免滚动时表格内容穿透显示 */
    z-index: 1;
}
/* 适配带边框表格的边框显示异常问题 */
.table-scroll-wrapper .table-bordered thead th {
    border-top: none;
}

2. 修改HTML结构 #

在你现有表格外层套一层带有table-scroll-wrapper类的div即可，修改后的完整代码如下：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 新增的滚动容器 -->
<div class="table-scroll-wrapper">
    <table class="table table-striped table-hover table-bordered">
        <thead>
            <th scope="col">Name</th>
            <th scope="col">Title</th>
            <th scope="col">Code</th>
        </thead>
        <tbody>
            <tr id="211140">
                <td><a href="view.php?action=viewDetails&ID=PM5281"> Jaxon Copeley</a></td>
                <td>Senior Designer</td>
                <td>8</td>
            </tr>
            <tr id="212265">
                <td><a href="view.php?action=viewDetails&ID=PM4102"> Sean Dacey</a></td>
                <td>Associate</td>
                <td>1687</td>
            </tr>
            <tr id="212364">
                <td><a href="view.php?action=viewDetails&ID=PM5448"> Nathan Giffen</a></td>
                <td>Senior Designer</td>
                <td>273.8</td>
            </tr>
            <tr id="212312">
                <td><a href="view.php?action=viewDetails&ID=PM6256"> Tristan Godson</a></td>
                <td>ProjePM Designer </td>
                <td>85.75</td>
            </tr>
            <tr id="207542">
                <td><a href="view.php?action=viewDetails&ID=PM6123"> Anthony McAulay</a></td>
                <td>Designer</td>
                <td>566.2</td>
            </tr>
            <tr id="207990">
                <td><a href="view.php?action=viewDetails&ID=PM5466"> Gabriella Schofield</a></td>
                <td>Senior Designer</td>
                <td>107</td>
            </tr>
            <tr id="213479">
                <td><a href="view.php?action=viewDetails&ID=PM6513"> Hayden Giblin</a></td>
                <td>Senior Associate Creative Designer - Head Of Graphic Design</td>
                <td>60</td>
            </tr>
            <tr id="208423">
                <td><a href="view.php?action=viewDetails&ID=PM5313"> Archer Doolan</a></td>
                <td>Associate</td>
                <td>487.9</td>
            </tr>
            <tr id="208468">
                <td><a href="view.php?action=viewDetails&ID=PM4330"> Taylah Hutcheon</a></td>
                <td>Senior Associate</td>
                <td>5</td>
            </tr>
            <tr id="212645">
                <td><a href="view.php?action=viewDetails&ID=PM0038"> Hayley Hodgson</a></td>
                <td>DirePMor</td>
                <td>37</td>
            </tr>
            <tr id="214303">
                <td><a href="view.php?action=viewDetails&ID=PM4237"> Henry Powell</a></td>
                <td></td>
                <td>9</td>
            </tr>
        </tbody>
    </table>
</div>

可选调整项 #

• 滚动区域高度：修改.table-scroll-wrapper的max-height属性值即可适配不同页面布局
• 表头背景色：如果你的页面使用了非白色的主题背景，将background属性值改为对应主题色即可

内容的提问来源于stack exchange，提问作者user982124