Angular Material 排序表 - 如何将标题文本右对齐？

Question

我正在使用 Angular Material 表。

我可以将列对齐设置为右对齐。

HTML:

<table mat-table [dataSource]="dataSource">
...
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    ...

CSS:

.mat-column-position {
    text-align: right;
}

但是当我使用排序功能时，列标题不再右对齐:

<table mat-table [dataSource]="dataSource" matSort>
...
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    ...

我猜问题出在“排序”符号上。

有什么想法吗？

Live demo

Answer 1

没错，它来自排序符号。解决此问题的一种方法是使用 CSS 仅更改 direction该标题从右到左:

.mat-header-cell.mat-column-position {
    direction: rtl;
}

/* If you want the same default margin for the sort icon */
:host ::ng-deep .mat-header-cell.mat-column-symbol .mat-sort-header-arrow {
    margin-right: 6px;
    margin-left: 0px;
}

或者，您可以在标题单元格上将 arrowPosition 属性设置为 before 以获得相同的结果:

<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">No.</th>