右对齐角度材质表中的一个mat标题单元格

Live demo

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

使用时,默认情况下通过flexbox完成单元格对齐 <mat-header-cell> <mat-cell> ,但是 不 <th mat-header-cell> 和 <td mat-cell> . 当使用table元素时,对齐是通过 text-align th 和 td 有可能与桌子的其他部分失去垂直对齐。

我发现 text-align: right 和设置 justify-content: flex-end 效果最好。这样,元素 display:table-cell 使用 ,和元素 display:flex 使用 justify-content

例如:

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

要使箭头显示在标题之前,应该使用 arrowPosition

另外,我建议使用auto-added column类( .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>

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

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