Primeng header misalign from body table - primeng-datatable

Question

Having a scrollable table with a scrollHeight set and after that changing the scrollHeight, the scrollbar should be aligned with the table header automatically. The table data is not changed.
(I have a scrollable table with header in a resizable dialog, and when dialog resizes, the scrollHeight of the table changes accordingly, but the scrollbar of the table is not aligned to the new scrollHeight)
updating primeng to 7.1.4 version.
<p-table [columns]="cols" [value]="cars" scrollable="true" [scrollHeight]="scrollHeight">
<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>
Correct display of the scrollbar on a scrollable table when changing the scrollHeight dynamically without chaning the data.

Answer 1

It seems to be an ongoing problem, there is a workaround here: https://github.com/primefaces/primeng/issues/5354. But still seems unsolved.
The workaround is to add these styles:
.ui-table-scrollable-header-box {
margin-right: 17px !important;
}
.ui-table-scrollable-body {
margin-right: 17px !important;
}

Answer 2

My workaround :
p-table {
cdk-virtual-scroll-viewport {
overflow-y: scroll !important;
}
}

Answer 3

Best solution which worked like charm for me:
.ui-table .ui-table-scrollable-body-table {
min-height: 1px !important;
}

Answer 4

In my case, if we add a width in header column than must add same width for body on that column
<p-table scrollHeight="calc(100vh - 280px)" [scrollable]="true" [paginator]="true" [rows]="100" [responsive]="true">
<ng-template pTemplate="header">
<tr>
<th style="width: 50px;"> Header One </th>
<th> Header Two </th>
<th> Header Three </th>
<th style="width: 150px;"> Header Four </th>
<th> Header Five </th>
</tr>
</ng-template>
<ng-template pTemplate="body">
<tr>
<td style="width: 50px;"> Body One </td>
<td> Body Two </td>
<td> Body Three </td>
<td style="width: 150px;"> Body Four </td>
<td> Body Five </td>
</tr>
</ng-template>
</p-table>

Answer 5

I've managed to solve this issue by doing the following:
1- add display: grid !important; to .p-datatable css class
2- add display: block; to .p-datatable>.p-datatable-thead>tr>th and .p-datatable>.p-datatable-tbody>tr>th
at the end you will have some structure like this:
.p-datatable {
.p-datatable-thead{
>tr{
>th{
display: block;
}
}
}
.p-datatable-tbody{
>tr{
>th{
display: block;
}
}
}}