Angular 18 mat-table with border radius and row-hover

Version: angular and angular/material 18.2.8.

I currently implemented my tables like this:

styles.scss:

table {
background-color: transparent !important;
}

.table-card {
margin-top: 20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 16px;
padding-bottom: 5px;
}


This works for a mat-table with a border radius, but is probably not a good solution.

Now, I want to add a row hover effect:

tr:hover {
background-color: rgba(255, 255, 255, 0.5);
}


This also works. However, for the last- and header-row it does not take the border-radius and padding into account since those are defined on the table-card.

My tables are really simple:

<div class="table-card" *ngIf="dataSource.data.length > 0">
<table mat-table matSort matSortActive="name" matSortDirection="asc" [dataSource]="dataSource">
...
</table>
</div>


Also, using:

.mat-row:hover {
background-color: red!important;
}


did not work for me.

What is the proper way to do a mat-table with border-radius and a row-hover effect?

Continue reading...