Freeze the first two rows on vertical scrolling of the page

I have implemented a table with horizontal scrolling in angular and have requirement to fix the first two columns while scrolling vertically. I have created a stackblitz to show the tables and have repeated tables so that vertical scroll bar of the page is visible. What I looking for is that as and when the user scrolls the page vertically, the first two column headers for the first table should be fixed so that the user can relate to the data below. Fund Name and Accounting fund class name rows in this case.

I tried to apply the following class to the respective tds and it didnt work

.stickyRows {
    position: sticky;
}

Here is the stackblitz

https://stackblitz.com/edit/angular-wpyqsa

html

<div class="card">
    <div class="card-header panel-heading">
        <span class="left-label" style="font-size: 18px; font-weight: bold; ">Accounting Fund Classes</span>

    </div>


    <div [ngClass]="{'show': isExpanded}" id="fundClass" class="collapse" role="tabpanel" aria-labelledby="fundClass_heading"
        data-parent="#fundClass" [attr.aria-expanded]="isExpanded">
        <div class="card-body scrollClass" *ngIf="data">

            <table id="FundClass" class="fundClassesTable table-striped">
                <tr *ngFor="let c of ColumnNames">
                    <th Fund Name scope="col" [ngClass]="c != 'Buttons1'? 'tableItem bold' : 'tableItem cellbgcolor'"> </th>
                    <ng-container *ngFor="let f of data let i=index">

                            <td class="tableItem" style="font-weight: bold"  *ngIf="c == 'Fund Name'">
                                
                            </td>
                             <td [attr.id]="'f.Id'" *ngIf="c == 'Accounting Class Name'"
                                class="tableItem">
                                
                            </td>
                            <td class="tableItem" *ngIf="c == 'Class ID'"></td>

                            <td [attr.id]="'f.Id'" *ngIf="c == 'Legal Fund Class'"
                                class="tableItem">
                                
                            </td>

                            <td [attr.id]="'f.Id'" *ngIf="c == 'Invested Amount'"
                                class="tableItem">
                                
                            </td>

                            <td [attr.id]="'f.Id'" *ngIf="c == 'Vehicle Type'"
                                class="tableItem">
                                
                            </td>

                            <td [attr.id]="'f.Id'" *ngIf="c == 'Closure Status'"
                                class="tableItem">
                                
                            </td>



                            <td class="tableItem" *ngIf="c == 'Buttons1'">

                                <button *ngIf="!EditMode[f.Id]" type="button"
                                    class="btn btn-primary btn mr-1 "
                                    (click)="buttonClicked(f.Id)">Edit</button>

                                <button *ngIf="EditMode[f.Id]" type="button"
                                    class="btn btn-primary btn mr-1"
                                    (click)="buttonClicked(f.Id)">Cancel</button>

                            </td>


                    </ng-container>

                </tr>
            </table>
        </div>
    </div>
</div>

css

<style>
    th {
        padding: 7px;
        position: sticky;
        left: 0px;
        min-width: 250px;
        width: 250px;
        background-color: #f5f7f7;
    }


    td {
        padding: 7px;
        min-width: 250px;
        /* max-width: 300px; */
    }

    .fundClassesTable {

        table-layout: fixed;
    }


    .cellbgcolor {
        color: transparent;
    }

    .btn {}

    .tableItem {
        text-align: left;
        border-left: solid 1px lightgrey;
        border-top: solid 1px lightgrey;
        border-right: solid 1px lightgrey;
        border-bottom: solid 1px lightgrey;

    }

    .rowItem:hover {
        background-color: #f5f7f7;
    }


    label {
        margin-left: 0.5rem;
        vertical-align: middle
    }


    .panel-heading {
        color: black;
        border-color: #ddd;
        overflow: hidden;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .panel-heading .left-label {
        display: inline-block;
        padding-top: 5px !important;

    }

    .scrollClass {
        overflow-x: scroll;
        display: grid;
        overflow-y:hidden;
        height: 100%;
    }

    .panel-heading label {
        margin-bottom: 0px !important;
    }

    #FundClass tr:hover {
        background-color: #ECF0F1;
    }

    .headcol {
        position: absolute;
        min-width: 300px;
        max-width: 300px;
        width: 5em;
        left: 0;
        top: auto;
        border-top-width: 1px;
        /*only relevant for first row*/
        margin-top: -1px;
        /*compensate for top border*/
    }

    .headcol:before {
        content: 'Row ';
    }

    .collapsed {
        color: #d6630a;
        font-size: 22px;
        text-decoration: none;
        font-weight: bold;
    }

    .expanded {
        color: #d6630a;
        font-size: 22px;
        text-decoration: none;
        font-weight: bold;

    }

    .fixed-side {
        border: 1px solid #000;
        background: #eee;
        visibility: visible;
    }


    .card-body {
        flex: 1 1 auto;
        padding: 0px;
        margin: 10px 0;
        background-color: white;


    }


</style>

from Freeze the first two rows on vertical scrolling of the page