3

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!

Tom
  • 1,358
  • 2
  • 14
  • 36

2 Answers2

3

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%;
    }
Eliezer Berlin
  • 3,170
  • 1
  • 14
  • 27
  • This solves the problem for now, but ideally the width should not be hard-coded. The width of the parent table coulum depends on the content of the columns. The table childs should somehow import this width. – Tom Sep 22 '20 at 05:29
  • @Tom They can't import the width, because they're two different tables with completely different content........... But if you make both tables 4 columns wide, (Using empty columns where necessary...) then they should be the same size. (As long as you do CSS `table-layout:fixed;`) – Eliezer Berlin Sep 22 '20 at 07:32
  • @Tom How about adding more table rows with your new content, instead of adding an entire new table? That way, everything's part of the same table, so it'll work without hard-coding? – Eliezer Berlin Sep 22 '20 at 07:34
0

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

robbieAreBest
  • 1,601
  • 14
  • 16