In PrimeNG, Frozen Headers also scrolling along with unfrozen columns and missing alignment of headers

Question

I have tried to show pResizableColumn pFrozenColumn into a single table.But after integrate both into single table Frozen Headers also scrolling along with unfrozen columns.

<p-table
    [value]="customers"
    scrollDirection="both"
    [scrollable]="true"
    scrollHeight="400px"
    styleClass="p-datatable-gridlines"
    [resizableColumns]="true"
  >
    <ng-template pTemplate="header">
      <tr>
        <th style="width:200px" pResizableColumn pFrozenColumn>Name</th>
        <th style="width:100px" pResizableColumn pFrozenColumn>Id</th>
        <th style="width:200px" pResizableColumn pFrozenColumn>Country</th>
        <th style="width:200px" pResizableColumn>Date</th>
        <th style="width:200px" pResizableColumn>Company</th>
        <th style="width:200px" pResizableColumn>Status</th>
        <th style="width:200px" pResizableColumn>Activity</th>
        <th style="width:200px" pResizableColumn>Status</th>
        <th style="width:200px" pResizableColumn>Activity</th>
        <th style="width:200px" pResizableColumn>Representative</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
      <tr>
        <td style="width:200px" pFrozenColumn>{{ customer.name }}</td>
        <td style="width:100px" pFrozenColumn>{{ customer.id }}</td>
        <td style="width:200px" pFrozenColumn>{{ customer.country.name }}</td>
        <td style="width:200px">{{ customer.date }}</td>
        <td style="width:200px">{{ customer.company }}</td>
        <td style="width:200px">{{ customer.status }}</td>
        <td style="width:200px">{{ customer.activity }}</td>
        <td style="width:200px">{{ customer.status }}</td>
        <td style="width:200px">{{ customer.activity }}</td>
        <td style="width:200px">{{ customer.representative.name }}</td>
      </tr>
    </ng-template>
  </p-table>