垫单元高度未填充父级

Question

我正在使用角垫桌。

我的问题是mat-cell的高度始终为14px（内部内容大小），但是我想修复mat-row的高度：

      <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="NAME">

        <mat-header-cell fxFlex="100%" class="my-mat-header" *matHeaderCellDef> 
          {{'NAME' | translate}} 
        </mat-header-cell>

        <mat-cell fxFlex="100%" class="my-mat-cell" *matCellDef="let element">
          {{ element.name }}
        </mat-cell>

      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns" class="my-mat-header-row"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" class="my-mat-row"></mat-row>
    </mat-table>

    .my-mat-row {
       min-height: 100%;
       border-bottom: none;
       padding: 5px 0;
    }

   .my-mat-cell {
     color: black;
     cursor: pointer;
     min-height: 100%;
   }

垫行高度为50像素，而垫单元高度仅为14像素。

如何填充父高？

Answer 1

由于matTable行是flex容器，因此您应该使用以下代码：

 .my-mat-row {
   ....
   align-items: stretch;
   ....
 }

这样，所有单元格将拉伸至全高