如何让MDB滚动表格表头固定顶部或仅表格主体滚动？

我用MDB的「Static table vertical scroll」示例实现了可滚动表格，当前功能正常，但想要实现表头固定在顶部、仅表格主体滚动的效果。尝试添加以下CSS后未生效：

.table-wrapper-scroll-y thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

现有代码 #

HTML

<div class="table-wrapper-scroll-y my-custom-scrollbar" style="max-height: 444px;">
    <table class="table">
        <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Company Name</th>
            <th scope="col">Username</th>
            <th scope="col">Email</th>
            <th scope="col">Address</th>
        </tr>
        </thead>
        <tbody>
        @foreach($clients as $client)
            <tr>
                <td>{{ $client->id }}</td>
                <td>{{ $client->company_name }}</td>
                <td>{{ $client->user->username }}</td>
                <td>{{ $client->user->email }}</td>
                <td>{{ $client->user->address }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

CSS

.my-custom-scrollbar {
    position: relative;
    max-height: 400px;
    overflow: auto;
}

.table-wrapper-scroll-y {
    display: block;
}

修复方案 #

问题出在两个点：一是未给表头设置背景色，滚动时tbody内容会穿透表头，看起来像是sticky没生效；二是缺少表格布局固定规则，容易导致列宽错乱。修改后的CSS如下：

/* 合并滚动容器样式，简化结构 */
.table-wrapper-scroll-y {
  display: block;
  max-height: 400px;
  overflow-y: auto;
}

/* 固定表格布局，避免滚动时列宽变化 */
.table-wrapper-scroll-y table {
  table-layout: fixed;
  width: 100%;
}

/* 固定表头核心样式，添加背景色防止内容穿透 */
.table-wrapper-scroll-y thead th {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 可替换为MDB主题色，比如用bg-white类 */
  z-index: 1;
}

优化后的HTML（可选，简化类名） #

<div class="table-wrapper-scroll-y" style="max-height: 444px;">
    <table class="table">
        <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Company Name</th>
            <th scope="col">Username</th>
            <th scope="col">Email</th>
            <th scope="col">Address</th>
        </tr>
        </thead>
        <tbody>
        @foreach($clients as $client)
            <tr>
                <td>{{ $client->id }}</td>
                <td>{{ $client->company_name }}</td>
                <td>{{ $client->user->username }}</td>
                <td>{{ $client->user->email }}</td>
                <td>{{ $client->user->address }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

注意事项 #

• 若使用MDB内置样式，可直接给th添加bg-white类替代自定义背景色
• 确保滚动容器的overflow属性为auto或scroll，不能是hidden
• 如需精准控制列宽，可给每个th设置width属性（比如width: 20%）

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