Angular Material表格添加可展开行后隐藏空白区域的方法

• 检查展开行的样式结构
  用浏览器开发者工具定位空白区域对应的DOM元素，查看是否是mat-row、mat-expansion-panel或自定义容器自带的margin/padding导致。比如针对展开行内的面板，可直接覆盖默认样式：

  .mat-expansion-panel {
    margin: 0 !important;
    padding: 0 !important;
  }
  

• 调整表格行的默认间距
  Angular Material表格的行和单元格默认有内边距，可自定义样式覆盖：

  mat-table mat-row {
    min-height: auto; /* 移除默认行高的多余空白 */
  }
  mat-cell {
    padding: 8px 0; /* 按需调整单元格内边距 */
  }
  

• 修正模板结构错误
  检查展开行的模板是否存在空标签、未闭合元素或错误的条件渲染（比如*ngIf导致的空占位）。确保matRowDef对应的展开列模板没有冗余结构。

• 穿透组件样式封装（若需要）
  如果组件启用了默认的ViewEncapsulation，样式无法生效时，可使用::ng-deep配合:host来穿透：

  :host ::ng-deep mat-table .mat-row.expanded-row + .mat-row {
    border-top: 0;
    margin: 0;
  }
  

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