如何将Bootstrap v5表格限制在主div容器内并实现粘性表头滚动

第一步：调整CSS样式 #

替换你的自定义CSS为以下内容：

body {
    background-color: #85daf1;
    margin: 0; /* 清除浏览器默认边距，避免出现多余视口滚动条 */
}

.custom {
    display: flex;
    flex-direction: column;
    background-color: hsl(47, 100%, 93%);
    height: 100vh;
    overflow: hidden; /* 强制子元素遵守父容器高度限制，禁止溢出 */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* 标签内容区占满父容器剩余可用高度 */
.tab-content {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 1rem 0;
}

/* 每个标签页占满内容区全部高度 */
.tab-pane {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 表格响应容器占满标签页剩余高度，内容溢出时自动出现滚动条 */
.table-responsive {
    flex: 1 1 auto;
    overflow: auto;
}

/* 表头粘性吸顶配置，三个表格通用 */
#companyDirectoryPersonnel thead th,
#nav-departments table thead th,
#nav-locations table thead th {
    position: sticky;
    top: 0;
    background-color: #fff; /* 匹配表格背景避免滚动时内容透显 */
    z-index: 10;
}

第二步：调整HTML结构 #

1. 移除tab-content元素上的container类，避免多余内边距挤压可用高度
2. 移除tab-pane元素上的table-responsive类，单独给表格套一层table-responsive容器，调整后的标签页结构参考：

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="nav-personnel" role="tabpanel" aria-labelledby="personnel-tab">
        <button id="addEntry" class="btn btn-success w-fit" onclick="openAddModal()">Add Personnel</button>
        <!-- 单独包裹表格的响应容器 -->
        <div class="table-responsive">
            <table class='table table-striped table-hover' id="companyDirectoryPersonnel">
                <thead>
                    <tr>
                    <th scope="col">Full Name</th>
                    <th scope="col">Location</th>
                    <th scope="col">Department</th>
                    <th scope="col">Edit</th>
                    <th scope="col">Delete</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 表格数据内容 -->
                </tbody>
            </table>
        </div>
    </div>
    <!-- 剩余两个标签页按照相同结构调整即可 -->
</div>

调整后外层容器固定占满100vh，顶部标题、搜索栏、标签栏固定展示不会被滚动隐藏，表格超出高度时自动出现内部滚动条，表头会固定在滚动容器顶部，滚动内容时始终可见。

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