0

I want to use Angular material table in my app and apply custom styling. The Rows should be separated by 8px while also supporting expandable rows. My desired styling for expanded rows looks something like this:

Desired styling for expanded rows

I have forked the Angular material table example for expandable rows here: https://stackblitz.com/edit/angular-24aegb

Changes I have made are: used border-spacing to create the margin between the rows and removed the borders.

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px !important;
}

Problem: the detail-row is a table row, which means it is separated from its parent-row as well. Is there a way to overwrite the spacing for these specific rows? If not, is there any workaround for expandable rows or the spacing between the rows that I could use in order to achieve the desired styling?

SimHue7
  • 47
  • 6

1 Answers1

0

I have found a workaround now: remove the border-spacing and insert an empty spacer-row with a fixed height before each row instead:

<ng-container matColumnDef="spacerColumn">
  <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length"></td>
</ng-container>

<tr mat-row *matRowDef="let element; columns: ['spacerColumn']" class="spacer"></tr>

.spacer {
  height: 8px;
}

Also see https://stackblitz.com/edit/angular-24aegb-r9xpvh

SimHue7
  • 47
  • 6