Angular material table (mat-table) with expandable rows, still gap between rows when collapsed

Question

I added an Angular material table on my website. I used the examples on the Angular page (link to the examples). The table rows should be expandable just like the ones on the "Table with expandable rows" example on the angular page. However, the collapsed rows still have a gap between showing a small part of the expandable part of the row (picture with the gaps for visualisation).

I combined the filter function and the remove and add column function, also from the Angular material examples, to my table too. So this may caused a porblem with the styling?

I checked the browser console, and the problem is a padding of the table rows, set to 0.75rem in the bootstrap.css. But if I set the padding of the rows to 0 the normal rows dont look good. There must be some way to only get rid of the ugly gaps.

This is the Angular Component with the animation part for the expandable row

@Component({
  selector: 'app-compare-page',
  templateUrl: './compare-page.component.html',
  styleUrls: ['./compare-page.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ]
})

The Component.html, the div with the class example-element-diagram holds the html elements of the expandable part of the row and is left out for better overview

<table mat-table [dataSource]="tableData" multiTemplateDataRows class="mat-elevation-z8">
    <div *ngFor="let column of displayedColumns; track column">
      <ng-container [matColumnDef]="column">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
      </ng-container>
    </div>
    <ng-container matColumnDef="expand">
      <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
      <td mat-cell *matCellDef="let element">
        <div *nfIf="expandedElement === element; else elseBlock "> 
        <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
            <mat-icon>keyboard_arrow_up</mat-icon>
          </button>
          </div>
          <ng-template #elseBlock>
            <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()"> 
            <mat-icon>keyboard_arrow_down</mat-icon>
          </button>
          </ng-template>
         
      </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
        <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
            <div class="example-element-diagram">


            </div>
          </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
    <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? undefined : element">
  </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
  </table>

I experimented with the padding without success, my css file still looks just like the one provided in the Angular example online.

Answer 1

I just found a solution. I don't think it is best practice. However, I added the "padding = 0px" I needed for the rows that you can collapse in the HTML file via the style key word. So only the rows necessary are affected.

Here is the same Code snippet from above with the added style at the necessary position

<table mat-table [dataSource]="tableData" multiTemplateDataRows class="mat-elevation-z8">
    <div *ngFor="let column of displayedColumns; track column">
      <ng-container [matColumnDef]="column">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
      </ng-container>
    </div>
    <ng-container matColumnDef="expand">
      <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
      <td mat-cell *matCellDef="let element">
        <div *nfIf="expandedElement === element; else elseBlock "> 
        <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
            <mat-icon>keyboard_arrow_up</mat-icon>
          </button>
          </div>
          <ng-template #elseBlock>
            <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()"> 
            <mat-icon>keyboard_arrow_down</mat-icon>
          </button>
          </ng-template>
         
      </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length" style="padding: 0px;">
        <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
            <div class="example-element-diagram">
             
            </div>
          </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
    <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? undefined : element">
  </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
  </table>