Tables within tables with JavaScript

I'm working with some student data and as this is not the first time this structure has occurred. I have to present some data on student performance in the discipline and inform myself that it would be interesting to also show a history of newcomers. In short, they said it would be nice to have a table containing tables. I thought of a structure as shown in the images below.

I remember when I was a .NET programmer having something like that in Syncfusion. I looked for some javascript plugins, but none of them served me well. Any suggestion? With JavaScript and CSS only possible?

The mentioned requirement can be achieved by using hierarchical binding functionality in the Syncfusion EJ2 Grid. This is explained in detail below,

The hierarchical binding in EJ2 Grid is used to visualize relations between parent and child records. This feature can be enabled by defining the childGrid and childGrid.queryString properties. The childGrid describes the options of child Grid element and the childGrid.queryString describes the relation between parent and child grids.

So, both the parent and child Grid should contain a common field name with values which is specified in the child Grid’s “queryString” property. Based on this relation the child grid will be mapped with its corresponding parent row.

Please find the below sample prepared based on this for reference,

Sample: https://stackblitz.com/edit/f6hauc

More details on this can be checked in the below documentation link,

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/hierarchy-grid/#hierarchical-binding