angular material 2 table header 居中对齐

Question

如果在md-table中将md-sort-header添加到md-header-cell中，它总是left-alignment。如何center-alignheader个单元格，比如"name"?

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> 
      Name 
</md-header-cell>

plnkr

Answer 1

更新 Angular Material 5.x.x，不需要 ng-deep：

  mat-header-cell {
   display:flex;
   justify-content:flex-end;
  }

DEMO

md-header-cell 得到 'translated' 到容器 class="mat-sort-header-container"。使用它，您可以将其样式设置为 ng-deep。使用 flexbox 使其内容居中。将以下内容放入组件样式表中：

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

DEMO

Answer 2

接受的答案是正确的。但是，::ng-deep 已贬值，将来可能会下降 (official documentation)。

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

正确的方法是使用ViewEncapsulation。在您的 component.ts 中，添加以下内容：

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

并覆盖 component.css 文件中的 class：

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

Answer 3

我认为给定的问题解决方案在方法上过于严格，我有一个类似的问题，我需要更改 mat-sort-header-container 的一些 css 属性，但是是动态的。

我做了类似 Vega 的回答，但在如何采用样式方面略有不同：

::ng-deep .mat-sort-header-container{
    justify-content: inherit;
    /* other inheritable properties */
}

它为其父级打开一些属性以在您的 html 代码中设置 mat-header-cell 样式，因此您在 mat-header-cell 和 ng-deep 中提供的任何样式都是从其父级继承，那么只有那些样式和 none 除此以外的样式会下降到该层次结构。

Answer 4

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

Answer 5

如果您不希望所有 header 个单元格都 align-center 您可以合并两个类:

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

然后在 html:

<th mat-header-cell *matHeaderCellDef class="text-center">Actions</th>

Answer 6

如果您想在 column-by-column 的基础上同时对齐 header 和行单元格的内容（允许列之间的对齐方式不同），您可以这样做：

<mat-table>
    <ng-container matColumnDef="myColumn">
      <mat-header-cell *matHeaderCellDef> My Column </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.myField}} </mat-cell>
    </ng-container>
...

.mat-column-myColumn{
  display: flex !important;
  justify-content: flex-start !important; /* Left aligned*/
}

对齐由 matColumnDef 中指定的名称应用。

angular material 2 table header 居中对齐

angular material 2 table header center alignment

css

angular-material

angular-material2

angular