有没有办法覆盖 Angular Material 表中可扩展行的间距?
Is there a way to overwrite spacing for expandable rows in Angular Material tables?
我想在我的应用中使用 Angular material table 并应用自定义样式。行应以 8px 分隔,同时还支持可扩展行。我想要的扩展行样式如下所示:
我在这里分叉了 Angular material table 可扩展行的示例:https://stackblitz.com/edit/angular-24aegb
我所做的更改是:使用 border-spacing 在行之间创建边距并删除了边框。
table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px !important;
}
问题:详细行是 table 行,这意味着它也与其父行分开。有没有办法覆盖这些特定行的间距?如果没有,是否有任何可扩展行的解决方法或我可以使用的行之间的间距来实现所需的样式?
我现在找到了解决方法:
删除边框间距并在每行之前插入一个具有固定高度的空间隔行:
<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;
}
我想在我的应用中使用 Angular material table 并应用自定义样式。行应以 8px 分隔,同时还支持可扩展行。我想要的扩展行样式如下所示:
我在这里分叉了 Angular material table 可扩展行的示例:https://stackblitz.com/edit/angular-24aegb
我所做的更改是:使用 border-spacing 在行之间创建边距并删除了边框。
table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px !important;
}
问题:详细行是 table 行,这意味着它也与其父行分开。有没有办法覆盖这些特定行的间距?如果没有,是否有任何可扩展行的解决方法或我可以使用的行之间的间距来实现所需的样式?
我现在找到了解决方法: 删除边框间距并在每行之前插入一个具有固定高度的空间隔行:
<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;
}