右对齐表格标题（mat-header-cell）答案

【问题标题】：Align table header (mat-header-cell) right右对齐表格标题（mat-header-cell）
【发布时间】：2020-11-16 21:36:06
【问题描述】：

对于我的表格的某些列（我使用的是angular material tables v10），我想要右对齐。使用align 属性对单元格本身执行此操作非常容易：<td mat-cell *matCellDef="let u" align="right">{{u.rating}}</td>

但是，与<th mat-header-cell *matHeaderCellDef mat-sort-header align="right">Rating</th> 相同的做法是行不通的。

在寻找解决方案时，我遇到了很多这样的 css 调整：

.mat-header-cell {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
 }

但这些只是弄乱了格式。

我有点惊讶，这种材料并没有提供一种简单的方法来做到这一点。我创建了一个已经右对齐单元格的示例应用程序： https://stackblitz.com/edit/angular-mnqztk

关于如何对齐标题还有什么建议吗？

解决方案

Nikhil Walvekar 找到了正确的解决方案（请参阅帖子的 cmets）。他在链接的 stackblitz 项目中修复了它。只需添加

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

到全局 css 文件，并在 header 标签中添加 text-right

<th mat-header-cell *matHeaderCellDef mat-sort-header class="text-right">Market Cap</th>

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

您使用支持对齐的 mat-text-column。

<mat-text-column [name]="column" *ngFor="let column of columnsToDisplay" justify="right">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
    <td mat-cell *matCellDef="let element" align="right"> {{element[column]}} </td>
</mat-text-column>

https://stackblitz.com/edit/angular-mnqztk-kwajho?file=src%2Fapp%2Ftable-expandable-rows-example.html

这是文档链接 https://material.angular.io/components/table/api#MatTextColumn

【讨论】：

嗯，这样就解决了对齐问题。但现在我无法再对列进行排序了。
我的bad之前没有检查排序。 sort-header 正在添加导致对齐问题的其他元素。我已经用全局样式修复了相同的 stackblitz。

【解决方案2】：

当您对表格使用 mat-sort 时，标题右侧的箭头在悬停时可见。所以他们占据了空间。

如果您想正确对齐标题。您只需从表中删除排序，然后在您的 css 中添加以下行。只有添加两行，标题才会右对齐。

table th{
  text-align:right
}

【讨论】：

箭头占用的空间最小。省略排序功能不是一种选择。