时间戳

首页 > 解决方案 > 具有可扩展行的垫表，删除隐藏行

css - 具有可扩展行的垫表，删除隐藏行

问题描述

我正在使用嵌套材料表的这个 stackblitz 示例在我的项目中创建类似的表。 https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts

这种方法会创建一个“隐藏”行，如果您要检查页面，就会有“example-element-row”类的行，然后是“example-detail-row”类的行。“示例详细信息行”。是隐藏的。

我遇到的问题与我的公司 CSS 表类有关，它添加了额外的填充 + 条状视图（每个偶数行都有灰色背景） - 使用这个 CSS 类，我的表看起来很糟糕，因为无论如何都会显示隐藏行 在此处输入图像描述

有可能克服这个问题吗？我尝试在下面的代码中添加带有一些标志的 ngif，但即使表格渲染得很好，它也会破坏可扩展行功能

<tr *ngIf="flag" mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

标签： cssangularangular-materialangular-material-table

解决方案

为了复制由您的公司 CSS 引起的行为，我将以下 CSS 块添加到您共享的 stackblitz 链接中：

tr td {
  padding:5px 0;
}

这是典型的网站总体 css 规则...要解决，我们只需要通过更详细的 css 规则来覆盖它：

.mat-row.example-detail-row td{
/* comment this to see the problem behavior */
  padding:0;
}

在这里完成工作堆栈闪电战

推荐阅读