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>

Answer 2

此外，似乎使用arrowPosition属性也可以得到相同的结果。

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

Answer 3

如果您不想将排序箭头保留在左侧，那么我找到了另一种解决方案：

::ng-deep .mat-sort-header-container {
  justify-content: flex-end;
}

或者将其放在不带::ng-deep的全局CSS文件中：

.mat-sort-header-container {
  justify-content: flex-end;
}

StackBlitz

角材料排序表-如何将标题文本向右对齐？

3 个答案: