Primeng 9 Table, horizontal scroll issue - primeng

Question

I am trying to implement full page scroll in primeng table similar to one given at https://www.primefaces.org/primeng/v9-lts/#/table/scroll. But I am not getting the horizontal scroll bar. Even the headers and columns are misaligned as shown below :
Please advise.
My code given below :-
<p-table [columns]="cols" [value]="cars2" [scrollable]="true" [style]="{width:'300px'}">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:150px">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
The prime ng related packages that are included in my project:
"primeflex": "1.1.0",
"primeicons": "^2.0.0",
"primeng": "^9.1.3",

Answer 1

The reason was because "node_modules/primeng/resources/primeng.css" entry was missing in angular.json/styles section.

Answer 2

Hello I was having the same trouble this is from the official doc
link: http://primefaces.org/primeng/table/scroll
<div class="card">
<h5>Vertical</h5>
<p-table [value]="customers" [scrollable]="true" scrollHeight="400px">
<ng-template pTemplate="header">
<tr>
<th style="min-width:200px">Name</th>
<th style="min-width:200px">Country</th>
<th style="min-width:200px">Company</th>
<th style="min-width:200px">Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td style="min-width:200px">{{customer.name}}</td>
<td style="min-width:200px">{{customer.country.name}}</td>
<td style="min-width:200px">{{customer.company}}</td>
<td style="min-width:200px">{{customer.representative.name}}</td>
</tr>
</ng-template>
</p-table>
</div>