Angular Material 2 Datatable标头未对齐

Question

我已将标题单元格和单元格的样式设置为右对齐但标题不仅仅对齐单元格文本

以下是指向sample

的链接

我添加了

.mat-cell, .mat-header-cell {
    text-align: right;
}

Answer 1

text-align: right不适用于display:flex元素，此处您尝试在text-align'元素mat-header-cell类上应用mat-sort-header-container属性。您可以使用以下方法解决问题。

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

Forked Stackblitz

Answer 2

这对我有用。我在CSS中添加了以下内容：

.mat-column-columnname {
    text-align: right;
    justify-content: flex-end;
}

并将排序箭头的位置更改为标签之前：

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