How to change elvation of a row in mat-table

Question

I am trying to elevate hovered row in mat-table so changing elevation to a <tr> on hover but elevation that is shadow effect not showing at the bottom side of the row however showing for the top, left, and right sides of the row.

.html

<div class="mat-elevation-z2" #TABLE>
      <table mat-table [dataSource]="dataSource" matSort>

    <!-- Required Columns... -->

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; let e = index; columns: columnsToDisplay;"
          (mouseover)="onMouseOver(e)" [ngClass] = "{'mat-elevation-z24' : e == mouseOverIndex}"></tr>
      </table>
    </div>

.ts

 mouseOverIndex = -1;

public onMouseOver(index) {
    this.mouseOverIndex = index;
  }

.css

.mat-row:hover {
  cursor: pointer;
}

What am I missing here?

I tried to use 'z24', 'z16', 'z8' etc but no use.

Answer 1

looks like the background: inherit on the row is overriding the drop shadow on the bottom.

adding the following to CSS will resolve this issue.

[mat-row].remove-background {
  background: none ;
}

Then apply class to your row.

<tr mat-row class="remove-background" (mouseover)="onMouseOver(e)"

Stackblitz

https://stackblitz.com/edit/angular-ecrvzg?embed=1&file=app/table-basic-example.css