Angular 15 Material Design table styling not working anymore

Question

I want to style the table rows and cells in an Angular Material Table in Angular.

But the "old" examples with simple css styles don't work anymore in Angular 15:

table {
  width: 100%;
  border-spacing: 0 8px !important;
}

td.mat-cell {
  padding: 16px 0 16px 0;
  border-bottom: 2px solid #ffa600;
  border-top: 2px solid #ffa600;
}

tr.mat-row {
  background: #79a1d8;
}

No matter what styles in the component's css file I use, the table design stays the same.

Here is the basic Table-Example of the Angular Material Design - extended by some styles - with no effects.

https://stackblitz.com/edit/angular-kwfygf?file=src/app/table-basic-example.css

What does Angular changed from older versions like version 8 to the current version 15, that let the table styles fail?

Answer 1

The elements you try to target don't have classes, instead they seem to be having attributes which use different styling syntaxes.

table {
  width: 100%;
  border-spacing: 0 8px !important;
}

td[mat-cell] {
  padding: 16px 0 16px 0;
  border-bottom: 2px solid #ffa600;
  border-top: 2px solid #ffa600;
}

tr[mat-row] {
  background: #79a1d8;
}

This CSS seems to work.

https://stackblitz.com/edit/angular-kwfygf-kdthdr?file=src%2Fapp%2Ftable-basic-example.css

Here is a very small example of the difference in case the link stops working:

table {
  width: 100%;
  border-spacing: 0 8px !important;
}


/** Styling for attributes **/

td[mat-cell] {
  padding: 16px 0 16px 0;
  border-bottom: 2px solid orange;
  border-top: 2px solid orange;
}

tr[mat-row] {
  background: skyblue;
}


/** For classes **/

td.mat-cell {
  padding: 16px 0 16px 0;
  border-bottom: 2px solid green;
  border-top: 2px solid green;
}

tr.mat-row {
  background: pink;
}

<!-- table with attributes -->

<table mat-table>
  <tr mat-row>
    <td mat-cell> Table with attributes </th>
  </tr>
  <tr mat-row>
    <td mat-cell> Name </th>
  </tr>
</table>

<!-- table with classes -->

<table class=mat-table>
  <tr class=mat-row>
    <td class=mat-cell> Table with classes </th>
  </tr>
  <tr class=mat-row>
    <td class=mat-cell> Name </th>
  </tr>
</table>