Freeze the first two rows on vertical scrolling of the page
I hope this is what you were looking for:
app.component.css
/* Container should define how tall the scrollable content is */
.scrollClass{
height: 500px;
}
/* tagetting the first <th>; to ensure <th> are scrolled along with <td> */
.fundClassesTable tr:nth-child(1) th{
z-index: 3;
position: sticky;
position: -webkit-sticky;
top: 2px;
}
/* target all <td> in the first row to be sticky */
.fundClassesTable tr:nth-child(1) td{
color: red;
position: sticky;
position: -webkit-sticky;
top: 2px;
z-index: 2;
background-color: white;
font-weight: bold;
}
/* Same as above but with top property as 36px
because the 2nd "row" is 36px from the top of <table> */
.fundClassesTable tr:nth-child(2) th{
z-index: 3;
position: sticky;
position: -webkit-sticky;
top: 38px;
}
.fundClassesTable tr:nth-child(2) td{
color: red;
position: sticky;
position: -webkit-sticky;
top: 38px;
z-index: 2;
background-color: white;
font-weight: bold;
}
Forked Stackblitz
EDIT:
Riv's solution has worked for me but i am left with one nagging problem. As I scroll through the fixed rows , I can see the data of the rows visible between gaps of the fixed rows and border of the fixed rows arent visible
Probably not the best solution out there but I would use ::after pseudo selector to create a background for your stickied table cells to hide the background cells when scrolling down.
.fundClassesTable tr:nth-child(1)::after{
content: '';
position: absolute;
height: 71px;
width: 96.7%;
top: 55px;
left: 19px;
z-index: 1;
background-color: white; //create a white background to cover your other cells when scrolled down
border: solid 1px deeppink;
}