CODEWITHSUNDEEP
angularangular-materialangular-material-table
Tom
Tom

Reputation: 1468

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

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?

enter image description here

Here is the Code:

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

Thanks a lot!

Upvotes: 3

Views: 3741

Answers (2)

Eliezer Berlin
Eliezer Berlin

Reputation: 3576

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%;
    }

Upvotes: 3

robbieAreBest
robbieAreBest

Reputation: 1771

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

Upvotes: 0

Related Questions