Css 用可扩展行填充表格，删除隐藏行

我正在使用这个嵌套材质表的stackblitz示例在我的项目中创建类似的表。

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

我遇到的问题与我的公司CSS表格类有关，它添加了额外的填充+条形视图（每一个偶数行都有灰色背景）-使用这个CSS类，我的表格看起来很糟糕，因为隐藏行仍然显示

有可能克服这个问题吗？我试图在下面的代码中添加带有一些标志的ngif，但它破坏了可扩展行功能，即使表呈现得非常好

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

为了复制公司CSS导致的行为，我在

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

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

完成

为了复制公司CSS导致的行为，我在

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

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

---

complete

这很简单，而且很有效，我花了很多时间在组件CSS文件中尝试不同的组合，但都不起作用。非常感谢你！还有一个问题，这个解决方案是否仍然可以将灰色/白色背景应用于奇数/偶数行？谢谢您的好话。。。对于css，我们的问题是每个第二行都需要隐藏，因此我们不能使用

：第n个孩子（奇数）

或

：第n个孩子（偶数）

。。。但是我们可以使用以下命令：`tr:nth child（4n+1）{background:lightgreen；}tr:nth child（4n+3）{background:lightblue；}tr.mat-header-row{background:lightpink；}`-我的答案中的stackblitz也用这个命令更新了。这非常简单，而且有效，我花了很多时间在组件CSS文件中尝试不同的组合，但都不起作用。非常感谢你！还有一个问题，这个解决方案是否仍然可以将灰色/白色背景应用于奇数/偶数行？谢谢您的好话。。。对于css，我们的问题是每个第二行都需要隐藏，因此我们不能使用

：第n个孩子（奇数）

或

：第n个孩子（偶数）

。。。但是我们可以使用以下命令：`tr:nth child（4n+1）{background:lightgreen；}tr:nth child（4n+3）{background:lightblue；}tr.mat-header-row{background:lightpink；}`-我的答案中的stackblitz也会用这个命令更新