Primeng/CSS for fixed and scroll-able columns

Question

My project uses Angular 5 and Primeng V5. I have a p-table which has dynamic columns, which should be scroll-able. I tried the below CSS changes but still I was not able to make it scrollable, css is getting applied but not able to make the columns scrollable. Can anyone guide me how to achieve so?

Referenced CSS: HTML table with horizontal scrolling (first column fixed)

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th></th>
            <th [colSpan]="cars.length">Brand</th>
            <th>Year</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td class="fixed-td">{{car.vin}}</td>
            <td *ngFor="let doc of docSelected" class="scrollable-td">{{doc.name}}</td>
            <td class="fixed-td">{{car.brand}}</td>
        </tr>
    </ng-template>
</p-table> 

In the above code I have to make class="scrollable-td" as scroll-able and class="fixed-td" should be fixed