CODEWITHSUNDEEP
angularjsangular-materialangular-material-table
Christian
Christian

Reputation: 904

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

Also using

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

did not work for me yet.

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

Upvotes: 1

Views: 71

Answers (0)

Related Questions