Create nested collapsible tables using Angular

Question

I'm displaying a table that consists of all of the events a specific team as attended in a given year. Each row of the table gives some general stats for a single event (seed, placement, etc). When I click on any given row, I want to expand a nested table that shows all the games from that specific event.

I'm having some issues with the formatting. Right now when I expand the new table, it reformats the parent table in a strange way and all of the nested table columns only stretch across the first of the parent table. How can I make it the same width of the parent table?

Here is an example

and here is a screenshot of the more pretty formatted table in case the stackblitz example is hard to see.

Collapsed:

Expanded:

Answer 1

You need to place your nested table in a tr and td with a colspan="4"

See the updated example: https://stackblitz.com/edit/angular-ivy-wnr2qn-nested-table

Answer 2

Full code. Just change ng-container for a tr.

Full code: https://stackblitz.com/edit/angular-ivy-kutwtd

Example live: Here

IMAGES EXAMPLE