PrimeNg expand table overlap root table

Question

I have a problem with primeNg table. I use child table printed with rowexpansion. It works well but when scrolling is enabled child table overlap header of parent How can I fix it?

Answer 1

I fixed it by setting z-index to 0 for thead element in child table. This topic helped me: PrimeNG - How to change the style of pTemplate="caption" in p-table for a single component

Solution:

1. Add id to child table

   <p-table id="childTable"

2. Add below code to corresponding scss

   :host ::ng-deep { #childTable { .p-datatable-thead { z-index: 0; } } }