Create nested collapsible tables using Angular

Viewed 868

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: enter image description here

Expanded: enter image description here

2 Answers
Related