如何解决带有可扩展行的Angular Material Table-将子表的各个列相互排列
我创建了带有可扩展行的Angular Material表。我想要显示一个子表,而不是像Angular Material文档中的示例那样的单个单元格。有谁知道如何将同一列的单元格互相排列?例如,要使同位素名称在元素名称下方对齐并且不向右移动?
这是代码:
https://stackblitz.com/edit/angular-material-starter-u5yjae?file=app/app.component.ts
非常感谢!
解决方法
这应该解决第一个问题,即在表中有一个表:
td.mat-cell table td.mat-cell {
padding-left: 0;
padding-right: 0;
}
但是您还有另一个不同的问题,这是: 您的外部表有4列,而内部表只有2列。 (因此,小表使每个列使用额外的空间,导致列不均匀。)因此,您有两个选择之一:
a。确保内部和外部表具有相同数量的列(必要时添加空列。),然后添加table.mat-table{table-layout:fixed;}
或
b。给每列固定的宽度。例如:
td.mat-cell:nth-child(1){
width:30%;
}
td.mat-cell:nth-child(2){
width:25%;
}
,
您应该只需要一点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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。