将角度材料表中的一个 mat-h​​eader-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>

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

Answer 1

使用<mat-header-cell>and 时<mat-cell>，默认情况下通过 flexbox 进行单元格对齐，但使用and时则不会。使用表格元素时，对齐使用. 如果一直强制使用 flexbox，表格单元格使用和<th mat-header-cell><td mat-cell>text-alignthtd可能会失去与表格其余部分的垂直对齐。

我发现设置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>

Answer 2

现场演示

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

Answer 3

请将这段代码复制粘贴到你的CSS中

:host ::ng-deep .mat-sort-header-container { 
    display: flex;  
    justify-content: center; 
}

th.mat-header-cell, td.mat-cell { 
    text-align: center; 
}