Angular 具有可扩展行的角形材料表-将子表的列相互排列

我创建了一个具有可展开行的角度材质表。我想显示一个子表，而不是像Angular Material docs示例中那样的单个单元格。有人知道如何将相同列的单元格排列在彼此下方吗？例如，使同位素名称在元素名称下方对齐，而不向右移动

代码如下：

---

非常感谢

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

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

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

---

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

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

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

a。确保内部表和外部表的列数相同（必要时添加空列），并添加

table.mat table{table layout:fixed；}

或

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

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

---

这解决了目前的问题，但理想情况下，宽度不应硬编码。父表coulum的宽度取决于列的内容。表child应该以某种方式导入此宽度。@Tom他们无法导入宽度，因为他们是两个内容完全不同的表。。。。。。。。。。。但如果将两个表都设为4列宽（必要时使用空列），则它们的大小应该相同。（只要你使用CSS

表格布局：修复；

）@Tom你觉得用新内容添加更多表格行，而不是添加整个新表格怎么样？这样，所有内容都是同一个表的一部分，因此它可以在没有硬编码的情况下工作？