Document limitation of matRipple on native table rows and possible solutions

[jchafik]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The ripple effect should be contained within the table row.

What is the current behavior?

When using <tr mat-row> in Angular 6 instead of <mat-row ...>, the ripple effect isn't contained within its parent container. I believe this is caused by the fact that div (the container used for the ripple) is not a valid child of the tr element it's applied to.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-myteuk

What is the use-case or motivation for changing an existing behavior?

N/A

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.x

[devversion]

Actually that's a different issue than #11165. The issue seems to be that position: relative on elements with display table-row does not have any effect.

Meaning that the ripples won't have the proper positions. Also overflow: hidden does not work. Both things are the foundation for the ripples.

[Chris2011]

Have exactly the same problem. Any workrounds here?

[devversion]

A workaround would be using <mat-row> instead of the native <tr> element.

[julien-vonoetinger]

I have faced the same problem too and it would be nice to have a fix for this.

[daniel-mckenna-zz]

Also have the same issue.

[glains]

I am having the same issue as well, but <mat-row> is not working as well.

[rocos-yishi]

  <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>

That works for me. :)

[theunreal]

Using Material 7.0.1 - I still experience this issue.

[MatthiasKunnen]

I believe this is because <tr> may only contain <td> and <th> (See spec). The overflow: hidden on the <tr> is simply not respected by the browser (Chrome nor Firefox). Using a ripple on mat-row works, contrary to @glains' comment. I tested using 7.0.1.

Opinion
After trying out the ripple on a table I came to the conclusion that, in my case, it's not a good idea due to the following reasons:

1. The row is far larger horizontally compared to vertically, this makes the ripple quite ugly
2. The ripple distracts when selecting text

[nalexander50]

@rocos-yishi solution worked for me. It would be nice if it were added to the Examples section for Table on the Angular Material website.