将角材料表中的一个 mat-header-cell 与排序标题对齐

Question

我正在尝试将表格中的一个标题对齐。我试过了：

 .header-align-right {
    display: flex;
    justify-content: flex-end;
  }

在一个类中并将其添加到 mat-header-cell 。这使文本正确对齐，但也为元素添加了奇怪的间距，使其与其余标题不对齐。在没有 display:flex 的情况下也尝试过，但没有任何效果。

 <ng-container matColumnDef="Number">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Number</th>
        <td mat-cell *matCellDef="let row" align="right">{{row.Number}}</td>
        <td mat-footer-cell *matFooterCellDef></td>
</ng-conIainer>

如您所见，我正确对齐单元格的内容，并且我也想对齐标题。

原文由 Sknecht 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现场演示

.header-align-right{
  display: flex;
  padding: 21px 0;
  justify-content: flex-end;
}

原文由 umutesen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Cell alignment is done by default via flexbox when using <mat-header-cell> and <mat-cell> , but not when using <th mat-header-cell> and <td mat-cell> .使用表格元素时，使用 text-align 完成对齐。如果您一直强制使用 flexbox，则使用 th 和 td 的表格单元格可能会失去与表格其余部分的垂直对齐。

我发现设置 text-align: right 和设置 justify-content: flex-end 的组合效果最好。这样，带有 display:table-cell 的元素使用 text-align ，而带有 display:flex 的元素使用 justify-content .

对于您的示例：

 .header-align-right {
  text-align: right;
  justify-content: flex-end;
}

要使箭头显示在标题之前，您应该使用 arrowPosition 属性。

另外，我建议使用自动添加的列类（ .mat-column- + 区分大小写的值 matColumnDef ）而不是添加 class="header-align-right" 。这将对齐页眉、单元格和页脚。所以这就是我的建议：

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

 <ng-container matColumnDef="Number">
  <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Number</th>
  <td mat-cell *matCellDef="let row">{{row.Number}}</td>
  <td mat-footer-cell *matFooterCellDef></td>
</ng-conIainer>

原文由 bts 发布，翻译遵循 CC BY-SA 4.0 许可协议