AngularMaterial - MatRipple отображает пульсации вне строки таблицы

Question

Я пытаюсь использовать matRipple в строке таблицы при клике.Тем не менее, волновой эффект распространяется за пределы конкретной строки таблицы tr. Однако он работает для table td. Эффект должен быть в границах, как это происходит в MatButton.

Ссылка: - https://stackblitz.com/edit/angular-material-2ahyd7?file=app/app.component.html

<table>
      <tbody>
        <tr matRipple  (click)="callalert()">
          <td>sss</td>
          <td>ssssss</td>
        </tr>
        <tr matRipple  (click)="callalert()">
          <td>sss</td>
          <td>ssssss</td>
        </tr>
        <tr matRipple  (click)="callalert()">
          <td>sss</td>
          <td>ssssss</td>
        </tr>
        <tr matRipple  (click)="callalert()">
          <td>sss</td>
          <td>ssssss</td>
        </tr>
      </tbody>
    </table>

Answer 1

Похоже, это известная проблема: https://github.com/angular/material2/issues/11883

Потенциальный обходной путь с использованием mat-table

<table mat-table [dataSource]="items">
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple></mat-row>
</table>

Вы также можете создать .ripple класс CSS и применить этот классв строки, которые вы хотите рябить:

.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: white radial-gradient(circle, transparent 1%, white 1%) center/15000%;
}
.ripple:active {
  background-color: #ccc;
  background-size: 100%;
  transition: background 0s;
}