I created an Angular Material table with expandable rows. Instead of a single cell like in the example from the Angular Material docs I want to display a sub-table. Does anyone know how to arrange cells of the same columns below each other? For example, so that the isotope names are aligned below the element names and are not shifted to the right?
Here is the Code:
https://stackblitz.com/edit/angular-material-starter-u5yjae?file=app/app.component.ts
Thanks a lot!
This should solve the first issue, of having a table inside a table:
td.mat-cell table td.mat-cell {
padding-left: 0;
padding-right: 0;
}
But you have another, different problem, which is: Your outer table has 4 columns, while your inner table only has two columns. (Because of this, the small table has each column use extra space, leading to uneven columns.) Therefore, you have one of two choices:
a. Make sure that both inner and outer tables have the same number of columns (Adding empty columns where necessary.), and add table.mat-table{table-layout:fixed;}
or
b. Give fixed widths to each column. For example:
td.mat-cell:nth-child(1){
width:30%;
}
td.mat-cell:nth-child(2){
width:25%;
}
You should be able to do this with just a bit of CSS. Try adding the following:
.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