Выровняйте правую одну ячейку mat-header в таблице угловых материалов с заголовками сортировки

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

Живая демоверсия

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

Answer 2

Выравнивание ячеек выполняется по умолчанию через flexbox при использовании <mat-header-cell> и <mat-cell>, но не при использовании <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>