对齐数据表的列

Posted 2021-04-13

我有一个angular-material数据表，我希望它左/右对齐某列。

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

    <ng-container matColumnDef="col0">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Col0</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.col0}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="col1">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Col1 </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.col1}} </mat-cell>
    </ng-container>

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

我需要做什么CSS呢？

答案

经过一些谷歌搜索行动后，我发现了一个github变更请求形式的解决方案：See here

简短形式是这样的：

.mat-column-col1 {
    display: flex;
    justify-content: flex-end;
}

只需将col1替换为您需要的列！