如何将内容对齐到Angular Material表特定列标题的右侧

Question

在我的垫子表中，我想在一些特定的列标题上应用不同的样式。在我的一些列标题中，我希望内容应该通过使用text-align: right正确对齐。所以我现在的CSS是:

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

上面的代码将表的所有标题内容向右对齐，但我只想将特定的标题列标题向右对齐，而不是全部。我找到的一个解决方案如下:

th.mat-header-cell:nth-child(3), th.mat-header-cell:nth-child(5){
text-align: right; 
}

它的工作，但问题与这个解决方案是，如果我添加一个多列，我需要不断改变我的CSS代码以及，这是非常静态的方式这样做。是否有任何方法我可以通过ng-container的名称访问CSS中的特定表头。例如，我的ng-container如下所示:

<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

对于上面的ng-container，我想像下面这样访问表头:

th.mat-header-cell['position'] {
text-align: right;
}

上面的代码只是我的伪代码，我想要类似的这种解决方案，我可以使用ng-container名称或表头名称访问表头，如果已经有任何存在的解决方案。我怎样才能做到这一点呢?

Answer 1

标识这个'position'列头

<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

你可以使用如下所示的CSS选择器

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

注意:如果你想为整个列设置样式

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