html - 对齐数据表的列

Question

我有一个 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 才能做到这一点？

Answer 1

经过一些谷歌搜索操作后，我找到了 github 更改请求形式的解决方案: See here

简写形式是这样的:

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

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