I am currently working on a small attendance project that involves using table components within mat-tab elements. However, I am facing an issue where the overflow from the table causes the entire component to scroll, when in fact I only want the table itself to scroll within the inner component.
Here are some solutions I have tried by adding "overflow: auto" in various sections:
- on the (app-attendance-table) selector
- inside the table component
- ::ng-deep { .mat-tab-body { overflow: auto } }
- on the (mat-tab-group) selector
- by wrapping (app-attendance-table) in an (ng-container) or (div) and adding overflow: auto
This is the outer component with tabs:
<!-- Code for outer component here --> This is the actual table component itself:
<!-- Code for actual table component here -->