Angular Mat-Table如何仅显示n行，超出行数后自动出现滚动条？

核心逻辑是通过外层容器限制总高度，配合表头固定实现滚动效果，不需要修改mat-table本身的display属性，适配mat-tab场景的布局约束。

步骤1：调整HTML结构 #

在mat-table外层新增一个独立容器，用于控制滚动区域：

<div class="table-scroll-container">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!-- 此处保留你原有的列定义、表头定义、行定义代码 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

步骤2：添加CSS样式 #

Angular Material默认单行行高为48px，要显示5行的话，总高度为「表头高度48px + 5*行高48px = 288px」，添加如下样式即可：

/* 外层滚动容器 */
.table-scroll-container {
  /* 要显示4行时可调整为 48 + 4*48 = 240px，可根据自定义行高灵活修改 */
  height: 288px;
  overflow: auto;
}

/* 固定表头，滚动时不跟随内容移动 */
th.mat-header-cell {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: inherit;
}

mat-tab场景适配 #

如果放在mat-tab中出现表格撑高标签页的问题，可添加如下样式限定标签页内容溢出规则：

/* 可在外层加自定义类名限定作用域，避免全局污染 */
::ng-deep .mat-tab-body-content {
  overflow: hidden !important;
}

额外说明 #

• 如果你使用的是<mat-table>组件写法而非<table mat-table>的原生表格写法，只需将CSS选择器中的th.mat-header-cell替换为.mat-header-row即可，逻辑完全一致。
• 当表格数据少于设定的显示行数时，容器高度会自动适配，不会出现空白滚动区域。

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