mat table multiple headers sticky not working

Question

I have a mat table with 2 headers in my 3rd and 4th column other columns I used rowspan, in which I need first 4 columns to be sticky. so used sticky attribute. but when I scroll horizontally the second row header of 3rd and 4th columns are not sticky it also getting scrolled.

before horizontal scroll it looks like this

after scrolling horizontally it looks like this

I used sticky attribute in the tag

Answer 1

Try the below css code:

.mat-header-row {
   position: sticky;
   top: 0;
   background-color: inherit;
}