具有可扩展行的角材料表 - 将子表的列排列在彼此下方答案

【问题标题】：Angular Material Table with expandable rows - Arrange colums of sub-table under each other具有可扩展行的角材料表 - 将子表的列排列在彼此下方
【发布时间】：2020-09-10 20:04:05
【问题描述】：

我创建了一个带有可扩展行的 Angular Material 表。我想显示一个子表，而不是像 Angular Material 文档中的示例中的单个单元格。有谁知道如何将相同列的单元格排列在彼此下方？例如，让同位素名称在元素名称下方对齐而不向右移动？

代码如下：

https://stackblitz.com/edit/angular-material-starter-u5yjae?file=app/app.component.ts

非常感谢！

【问题讨论】：

标签： angular angular-material angular-material-table

【解决方案1】：

这应该解决第一个问题，即在表中包含一个表：

td.mat-cell table td.mat-cell {
    padding-left: 0;
    padding-right: 0;
}

但是你还有另一个不同的问题，那就是：您的外部表有 4 列，而您的内部表只有两列。（正因为如此，小表的每一列都使用了额外的空间，导致列不均匀。）因此，您有两种选择：

一个。确保内表和外表的列数相同（必要时添加空列。），并添加table.mat-table{table-layout:fixed;}

或

b.为每列指定固定宽度。例如：

   td.mat-cell:nth-child(1){
       width:30%;
    }
    
    td.mat-cell:nth-child(2){
       width:25%;
    }

【讨论】：

这暂时解决了问题，但理想情况下，宽度不应该是硬编码的。父表 coulum 的宽度取决于列的内容。子表应该以某种方式导入这个宽度。
@Tom 他们无法导入宽度，因为它们是两个不同的表格，内容完全不同............但是如果你让两个表格都是 4 列宽，（在必要时使用空列......）那么它们应该是相同的大小。（只要你做CSStable-layout:fixed;）
@Tom 用您的新内容添加更多表格行，而不是添加一个全新的表格怎么样？这样一来，所有内容都属于同一张表，因此无需硬编码即可工作？

【解决方案2】：

只需一点 CSS，您就可以做到这一点。尝试添加以下内容：

.mat-column-name {
  width: 35%;
  max-width: 200px;
}

.mat-column-expandedDetail {
  padding: 0px !important;
}

https://stackblitz.com/edit/angular-material-starter-ukxcws?file=app/app.component.css

【讨论】：