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

请将此代码粘贴到您的CSS中

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

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

Answer 2

Live demo

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

Answer 3

默认情况下，使用<mat-header-cell>和<mat-cell>时通过flexbox进行单元格对齐，但是使用<th mat-header-cell>和<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>

Answer 4

像这样向您的mat-header-cell添加一个align-right类：

<th mat-header-cell *matHeaderCellDef class="align-right">Hello</th>

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

我认为这是可行的，因为还有更多的特异性。

我已经使用MD两周了，我已经非常不喜欢它了，它是如此笨拙。

在带有排序标题的角形材料表中将右一个Mat-Header-cell对齐

4 个答案: