![How Do You Style an Angular Material Table? [Closed]](https://docuprint.cloud68.co/uploads/how-do-you-style-an-angular-material_1200.jpg)
I need some help with styling an angular material table. How do yous style the headers and the cells?
This is my app.component.html:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="rating">
<th mat-header-cell *matHeaderCellDef>Rating</th>
<td mat-cell *matCellDef="let element">{{ element.rating }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
1 Answer
You can apply css on mat-header-cell for header style and mat-cell for data cell.
.mat-header-cell {
color: red;
}
.mat-cell {
color: blue;
}
See the Stackblitz
