我在我的网站上添加了一个Angular材料表。我使用了Angular页面上的示例（link to the examples）。表行应该是可扩展的，就像Angular页面上的“具有可扩展行的表”示例一样。然而，折叠的行在显示行的可扩展部分（picture with the gaps for visualisation）的一小部分之间仍然有间隙。
我把过滤器函数和删除和添加列函数，也是从Angular材质的例子中，组合到我的表中。所以这可能会导致样式的问题？
我检查了浏览器控制台，问题是表格行的填充，在bootstrap.css中设置为0.75rem。但是如果我将行的填充设置为0，正常的行看起来不好。必须有一些方法来消除丑陋的间隙。
这是Angular组件，其中包含可展开行的动画部分

@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)')),
    ]),
  ]
})

字符串
Component.html，带有类example-element-diagram的div保存行的可扩展部分的html元素，为了更好的概览，将其省略

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

型
我尝试了填充，但没有成功，我的css文件看起来仍然像在线Angular示例中提供的文件。