How do I center Angular Material table column headers and mat-cell content

Question

Can anyone provide a concise explanation of how to center (or move to the right) Angular Material table header and cell texts? There seems to be a lot about needing /deep/ and other versions, which may or may not be deprecated.

score 20 · Answer 1 · answered Feb 13 '20 at 12:08

20

If no answer is working above then try this :

table {
  width: 100%;
}

mat-header-cell, mat-cell {
  justify-content: center;
}

or

angular material 2 table header center alignment

answered Feb 13 '20 at 12:08

Shabbir Ismail

278
2
14

score 14 · Answer 2 · answered Aug 14 '19 at 06:13

14

use this style with !important

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

answered Aug 14 '19 at 06:13

Amir Azizkhani

1,662
17
30

score 10 · Answer 3 · answered Mar 11 '21 at 11:11

10

This exactly works for mat-table.

td, th {
    text-align: center !important;
    vertical-align: middle !important;
}

.mat-sort-header-container {
    justify-content: center !important;
}

answered Mar 11 '21 at 11:11

score 6 · Answer 4 · answered Nov 09 '20 at 10:41

you can achieve that easily if you use this layout of table

<table mat-table [dataSource]="dataSource" style="width: 100%;">

   <!-- identification Column -->
   <ng-container matColumnDef="identification">
       <th mat-header-cell *matHeaderCellDef> ID </th>
       <td mat-cell *matCellDef="let element"> {{element.identification}} </td>
  </ng-container>

  <!-- value Column -->
  <ng-container matColumnDef="total">
    <th mat-header-cell *matHeaderCellDef> Value </th>
    <td mat-cell *matCellDef="let element"> {{ element.value | currency: 'ILS' }} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

and put this in where-the-table-is.component.css

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

score 5 · Answer 5 · answered Oct 26 '20 at 13:17

5

Try this, It's work for me.

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

answered Oct 26 '20 at 13:17

lahiru dilshan

690
9
13

score 3 · Answer 6 · answered Sep 13 '18 at 15:36

3

You can use text-align: center

Here is an example StackBlitz tweaked from the Material docs

answered Sep 13 '18 at 15:36

nick

1,880
17
27

score 3 · Answer 7 · answered Jun 11 '21 at 18:31

3

If you are using a sorted header you need to provide

table {
    width: 100%;
    text-align: center !important;
}

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

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

answered Jun 11 '21 at 18:31

Aswin KV

1,710
2
12
23

It appears only the CSS rule on .mat-sort-header-container is absolutely necessary. FYI, define in the top level CSS, not a component's CSS file. – schmiddy98 Aug 10 '22 at 19:18

score 2 · Answer 8 · answered Sep 07 '20 at 15:58

2

This works for me

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

table {
  text-align: center !important;
  width: 100%;
}

answered Sep 07 '20 at 15:58

San Jaisy

15,327
34
171
290

This is the only one that worked for me - I dont understand it - not come across :host ::ng-deep – Richard Turner Jul 20 '22 at 09:55

score 2 · Answer 9 · answered Jun 22 '21 at 17:59

2

Try using class text-center

<td mat-cell *matCellDef="let element" class="text-center"> {{element.multiplicador}} </td>

answered Jun 22 '21 at 17:59

Lucas Borinato

21
1

score 1 · Answer 10 · answered Sep 13 '18 at 15:31

1

You can create css class

.centre {
  text-align: center
}

and add it to your html

<th mat-header-cell *matHeaderCellDef class="centre"> Symbol </th>

just like here: https://stackblitz.com/edit/angular-qfav5c?file=app%2Ftable-basic-example.css

answered Sep 13 '18 at 15:31

sylwester

16,498
1
25
33

1

Please mention the angular version? The stackblitz works nicely with a "td" element that has a mat-cell attribute. In Angular 8 I'm using a "mat-cell" element directly, and I cannot make this solution work. Tried putting text-align:center into one of the dynamically created classes that the material table recognizes, also no luck. – chrisinmtown Oct 22 '19 at 21:01
@chrisinmtown as you can see this question is from 2018 so it was angular 1 – sylwester Mar 20 '20 at 18:50
@chrisinmtown : for recent Angular (8/9), you have to tell your component to use the "standard DOM" instead of the "shadow DOM" using `encapsulation: ViewEncapsulation.None` in the `@Component` properties. – Julien Kronegg Apr 17 '20 at 13:29

score 0 · Answer 11 · answered Jun 23 '22 at 08:50

0

This works for me:

td, th {
text-align: center !important;
vertical-align: middle !important;
}
:host ::ng-deep .mat-sort-header-container {
display: flex;
justify-content: center;
}

answered Jun 23 '22 at 08:50

Bhargavi

233
3
11

score 0 · Answer 12 · answered Oct 27 '22 at 13:21

0

This worked for me:

.mat-header-cell {
  flex-direction: column;
  justify-content: center;
}

.mat-cell {
  text-align: center;
  justify-content:center;
}

answered Oct 27 '22 at 13:21

Yannick van Leeuwen

1

How do I center Angular Material table column headers and mat-cell content

12 Answers12