如何移除mat-data-table中部分mat-expansion-panel的边框？

我来帮你搞定这个边框问题！这种部分行出现边框的情况，大概率是Angular Material的mat-expansion-panel自带默认样式，或者表格单元格的边框继承导致的——哪怕数据一致，DOM渲染时的样式优先级差异也会造成这种表现。下面给你几个可行的解决方案：

方案1：自定义CSS类覆盖面板默认样式 #

先给你的mat-expansion-panel加一个专属类，然后通过CSS强制移除边框和多余阴影：

修改后的模板代码 #

<mat-cell *matCellDef="let workOrder"> 
  <mat-expansion-panel 
    class="no-border-panel" 
    hideToggle="true" 
    #panel 
    *ngIf="workOrder.notes !== ''" 
    (mouseenter)="panel.open()" 
    (mouseleave)="panel.close()"
  > 
    <mat-expansion-panel-header> 
      <mat-panel-title style="justify-content: center"> 
        <mat-icon style="color:#8fbbdf;">notes</mat-icon> 
      </mat-panel-title> 
    </mat-expansion-panel-header> 
    <mat-panel-description> 
      {{ workOrder.notes }} 
    </mat-panel-description> 
  </mat-expansion-panel> 
</mat-cell>

对应的CSS样式 #

如果是写在组件的样式文件里，需要用::ng-deep穿透Angular的视图封装；如果放到全局样式文件styles.scss中，就不需要加::ng-deep：

/* 移除面板自身的边框和阴影 */
::ng-deep .no-border-panel {
  border: none !important;
  box-shadow: none !important;
}

/* 确保单元格不会给面板添加上下边框 */
::ng-deep mat-cell:has(.no-border-panel) {
  border: none !important;
}

方案2：统一表格行/单元格的边框样式 #

有时候mat-table的行或单元格默认带边框，会透过面板显示出来，你可以直接统一处理表格的边框：

/* 移除所有表格行的底部边框 */
::ng-deep mat-row {
  border-bottom: none !important;
}

/* 或者只针对notes列的单元格移除边框 */
::ng-deep mat-cell:nth-child(你的notes列索引) {
  border: none !important;
}

为什么只有部分行有边框？ #

虽然数据一致，但*ngIf="workOrder.notes !== ''"会让有备注的行渲染mat-expansion-panel，空行则没有面板——表格的默认边框样式在空单元格和带面板的单元格上表现不一致，通过上面的CSS就能统一去掉多余边框啦。

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