如何让表头显示在滚动条上方，且不修改表格高度的前提下使tbody高度占满？

问题描述 #

站点预览：

当前无法修改表格的高度，表格未占满容器的100%高度，需要实现以下效果：

• tbody高度占满可用空间
• 表头固定在滚动条上方，不被包含在滚动区域内
  使用技术栈：Angular、TypeScript、SCSS，现有HTML代码如下：

<div>
    <div>
        <!-- TABLE -->
        <div> **(the scrollbar is on this div)**
            <table [dataSource]="aData">
                <!-- Status Column -->
                <ng-container>
                    <th mat-header-cell></th>
                    <td mat-cell>
                        <div class="cell-content"></div>
                        <div class="cell-content center-text">
                    
                        </div>
                    </td>
                </ng-container>

                <!-- Emitter Column -->
                <ng-container>
                    <th mat-header-cell></th>
                    <td mat-cell>
                        <div class="cell-content"></div>
                    </td>
                </ng-container>
[...]
<tr mat-header-row *matHeaderRowDef="getDisplayedColumns(); sticky: true"></tr>
                <tr
                    mat-row
                    *matRowDef="let document; columns: getDisplayedColumns()"
                    (click)="onClickRow(document)"
                ></tr>
            </table>

解决方案 #

你已经在表头行配置了sticky: true，只需要通过flex布局控制容器高度即可实现需求，具体修改如下：

1. 给HTML结构添加可识别的类名 #

<!-- 最外层容器 -->
<div class="table-wrap">
    <div class="table-top-area">
        <!-- 此处放表格外的顶部内容，如筛选、操作按钮等 -->
    </div>
    <!-- 滚动容器 -->
    <div class="table-scroll-box">
        <table mat-table [dataSource]="aData">
            <!-- Status Column -->
            <ng-container matColumnDef="status">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let item">
                    <div class="cell-content"></div>
                    <div class="cell-content center-text">
                    </div>
                </td>
            </ng-container>
            <!-- Emitter Column -->
            <ng-container matColumnDef="emitter">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let item">
                    <div class="cell-content"></div>
                </td>
            </ng-container>
            <!-- 其余列定义 -->
            [...]
            <tr mat-header-row *matHeaderRowDef="getDisplayedColumns(); sticky: true"></tr>
            <tr mat-row *matRowDef="let document; columns: getDisplayedColumns()" (click)="onClickRow(document)"></tr>
        </table>
    </div>
</div>

2. 添加SCSS样式 #

// 确保最外层容器的所有父级高度均已设置为100%，从html、body到页面级容器都需要配置
.table-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .table-scroll-box {
    flex: 1;
    overflow-y: auto;
    // 如需横向滚动可添加 overflow-x: auto
  }

  table.mat-table {
    width: 100%;
  }
}

注意事项 #

如果高度还是没有生效，检查当前组件到根节点的所有父级元素高度是否都设置为100%，避免父级高度自适应导致100%高度不生效。

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