如何移除Angular Material中mat-row/mat-cell的上下边距/内边距

开发者阿泽

2026-7-6

解决Angular Material mat-table行高过大的问题

你遇到的问题核心是Angular Material的MDc表格组件默认给mat-row设置了最小行高，同时mat-cell带有默认内边距，仅修改cell的内联样式无法覆盖这些默认规则。以下是几种可行的解决方法：

方法1：组件内穿透修改样式（仅当前组件生效）

在组件的CSS/SCSS文件中添加以下代码，利用:host ::ng-deep穿透Angular的样式封装：

:host ::ng-deep .mat-mdc-row {
  min-height: auto; /* 移除默认的最小行高限制 */
}

:host ::ng-deep .mat-mdc-cell {
  padding: 0 !important; /* 覆盖cell的默认内边距 */
  line-height: 1.2; /* 根据文本大小调整行高，确保刚好适配 */
}

方法2：全局样式修改（全项目表格生效）

如果希望所有mat-table都使用紧凑行高，直接在项目根目录的styles.css（或styles.scss）中添加：

.mat-mdc-row {
  min-height: auto;
}

.mat-mdc-cell {
  padding: 0;
  line-height: normal; /* 使用文本默认行高 */
}

方法3：针对单个表格设置紧凑样式

先给目标表格添加自定义类：

<mat-table class="compact-table" [dataSource]="yourDataSource">
  <!-- 表格列定义 -->
</mat-table>

然后在组件样式中添加：

:host ::ng-deep .compact-table .mat-mdc-row {
  min-height: auto;
}

:host ::ng-deep .compact-table .mat-mdc-cell {
  padding: 0;
  line-height: 1.2;
}