Need Box shadow for mat-row Angular

Question

I want to bring box shadow while hovering in . Using CSS box-shadow does not work well with bottom border except last one.

Somehow it seems the lower row border is blocking the display of shadow and thus is not visible. Is mat-elevation can be used here? tried it but could not make it work.

HTML:

<table mat-table [dataSource]="dataSource" >

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element" > {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
          [class.box-shadddo]="row.name == hoveredName" 
          (mouseover)="mouseOver(row)"
          (mouseout)="mouseLeft()"></tr>
</table>

TS:

import {Component} from '@angular/core';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
  hoveredName;

   mouseOver(row) {
    if(this.hoveredName !== row.name)
      this.hoveredName = row.name;
  }

  mouseLeft(){
    this.hoveredName = undefined;
  }
}

CSS:

table {
  width: 100%;
}

.box-shadddo {
  box-shadow: 0px 0px 10px 0px grey;
}

Answer 1

Found a pure css way to achieve this with the transform: scale css property.

.mat-row:hover{
    box-shadow: 0px 0px 0px 9px rgba(0,0,0,0.75);
    transform: scale(1);
}

In this rule definition the scale doesn't change the size but brings the row to the front layer.

Also sharing this stackblitz demo