Remove the shadow around the table. - Angular Material Table

Question

For the material table, I want to remove the shadow around the table. How could I do this because what I found in the doc and added to CSS didn't work.Or I would like to add keyboard shortcuts so that I can move between the lines with the arrow keys and select with shift. What can be used for the angular step does not work on my table and does not even write an error.

This is one of the code I found for the disappearance, but unfortunately like the other CSS solutions it doesn't work either:

mat-table{
  transition: none !important;
  box-shadow: none !important;
}

Would there be a solution or documentation that I could use to solve these functions?

Answer 1

Apply class="mat-elevation-z0" to your mat-table:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z0">

If you would like to read up a bit, then have a look at:

https://material.angular.io/guide/elevation

.mat-elevation-z8 {
    box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
}

• These classes follow the pattern mat-elevation-z#, where # is the elevation number you want, from 0 to 24