Angular Material Table 具有可扩展的行 - 将子 table 的列彼此排列

Question

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

这是代码：

非常感谢！

Answer 1

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

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

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

Answer 2

这应该可以解决第一个问题，即 table 在 table 中：

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

但是你还有另一个不同的问题，那就是：您的外部 table 有 4 列，而您的内部 table 只有两列。（因此，小table每列使用额外的space，导致列不均匀。）因此，您有两个选择之一：

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

或

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

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

Angular Material Table with expandable rows - Arrange colums of sub-table under each other