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;
}