Angular Table tabe with sticky columns are resizing with scrolling horizontally

I am using an angular material table, I have the first 4 rows set to sticky and the other 10 are not. I have white-space: no-wrap since the content of the cells needs to be fully visible.

the table is in a parent element thats 600px wide, so the table is set to overflow: auto;

the problem is that the 4 'sticky' columns 'resize' as you scroll horizontally, i need them to be wide to show their content no matter the width of the content, but also not 'resize' as i scroll horizontally

    <div class="table-container">
    <table mat-table matSort [dataSource]="dataSource">
        <ng-container matColumnDef="test1">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test1</th>
            <td mat-cell *matCellDef="let element"> {{element.test1}} </td>
        </ng-container>

        <ng-container matColumnDef="test2">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test2</th>
            <td mat-cell *matCellDef="let element"> {{element.test2}} </td>
        </ng-container>

        <ng-container matColumnDef="test3">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test3</th>
            <td mat-cell *matCellDef="let element"> {{element.test3}} </td>
        </ng-container>

        <ng-container matColumnDef="test4">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test4</th>
            <td mat-cell *matCellDef="let element"> {{element.test4}} </td>
        </ng-container>

        <ng-container matColumnDef="test5">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test5</th>
            <td mat-cell *matCellDef="let element"> {{element.test5}} </td>
        </ng-container>

        <ng-container matColumnDef="test6">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test6</th>
            <td mat-cell *matCellDef="let element"> {{element.test6}} </td>
        </ng-container>

        <ng-container matColumnDef="test7">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test7</th>
            <td mat-cell *matCellDef="let element"> {{element.test7}} </td>
        </ng-container>

        <ng-container matColumnDef="test8">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test8</th>
            <td mat-cell *matCellDef="let element"> {{element.test8}} </td>
        </ng-container>

        <ng-container matColumnDef="test9">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test9</th>
            <td mat-cell *matCellDef="let element"> {{element.test9}} </td>
        </ng-container>

        <ng-container matColumnDef="test10">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>Test10</th>
            <td mat-cell *matCellDef="let element"> {{element.test10}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

and this is my scss

.table-container { overflow: auto;

table {
    font: $table-font;
    box-shadow: unset;
    border: unset;

    th, td {

        &.mat-table-sticky-border-elem-left {
            box-shadow: $table-sticky-column-shadow;
        }
    }

    tr {
        height: $row-height;

        &:nth-child(even) {
            background: colors.$primaryColor050;
        }

        .mat-cell {
            border-bottom: $table-row-bottom-margin;
            font-size: $font-size;
            text-overflow: ellipsis;
        }

        .mat-cell.mat-table-sticky:last-of-type {
            background: red;
        }
    }

    thead {
        th {
            padding-right: 10px;

            &:not(:first-child) {
                padding-left: 10px;
            }

            &.mat-table-sticky {

            }
        }

        .mat-header-row {
            background-color: colors.$primaryColor050;

            .mat-sort-header-arrow {
                color: colors.$primaryColor500;

                .mat-sort-header-stem {
                    display: none;
                }
            }

            .mat-header-cell {
                border-top: 1px solid colors.$primaryColor100;
                color: colors.$black;
                font-weight: 600;
                text-transform: uppercase;
            }
        }
    }

    tbody {
        td {
            padding-right: 10px;
            white-space: nowrap;

            &:not(:first-child) {
                padding-left: 10px;
            }
        }
    }
}

}

any ideas would be greatly appreciated, i am almost out of things to try, been searching for 2 days now how to fix this