Source:  Twitter logo

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.

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

16 users liked answer #0dislike answer #016
Shabbir Ismail profile pic
Shabbir Ismail

use this style with !important

th.mat-header-cell {
  text-align: center !important;
}
9 users liked answer #1dislike answer #19
amir azizkhani profile pic
amir azizkhani

This exactly works for mat-table.

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

.mat-sort-header-container {
    justify-content: center !important;
}
6 users liked answer #2dislike answer #26

You can use text-align: center

Here is an example StackBlitz tweaked from the Material docs

3 users liked answer #3dislike answer #33
nick profile pic
nick

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

2 users liked answer #4dislike answer #42
sylwester profile pic
sylwester

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;
}
2 users liked answer #5dislike answer #52
user12163165 profile pic
user12163165

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;
}
2 users liked answer #6dislike answer #62
Aswin KV profile pic
Aswin KV

This works for me

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

table {
  text-align: center !important;
  width: 100%;
}
1 users liked answer #7dislike answer #71
San Jaisy profile pic
San Jaisy

Try this, It's work for me.

:host ::ng-deep .mat-sort-header-container {
   display: flex;
   justify-content: center;
}
1 users liked answer #8dislike answer #81
lahiru dilshan profile pic
lahiru dilshan

Try using class text-center

<td mat-cell *matCellDef="let element" class="text-center"> {{element.multiplicador}} </td>
1 users liked answer #9dislike answer #91
Lucas Borinato profile pic
Lucas Borinato

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).