css - mat-cell 高度未填充父级

Question

我正在使用 Angular 垫 table 。

我的问题是 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%;
   }

mat-row 高度为 50px，而 mat-cell 仅为 14px。

如何填满父级高度？

Answer 1

因为 matTable 行是 flex 容器，你应该使用这个:

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

这样所有的单元格都会拉伸(stretch)到全高