frozenWidth is required to explicitly define the width of the frozen section in order to properly align and render the frozen columns alongside the scrollable part of the table.

<div class="ui-table-wrapper">
 <p-table
    [value]="products"
    [columns]="colsProd"
    [frozenColumns]="frozenCols"
    [scrollable]="true"
    scrollHeight="400px"
    frozenWidth="250px"
    dataKey="loadId"
   
  >
    <ng-template pTemplate="frozenheader">
      <tr>
        <th style="width: 250px" *ngFor="let col of frozenCols">{{ col.header }}</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="frozenbody" let-rowData>
      <tr>
        <td style="width: 250px" *ngFor="let col of frozenCols">{{ rowData[col.field] }}</td>
      </tr>
    </ng-template>

    <ng-template pTemplate="header">
      <tr>
        <th style="width: 250px" *ngFor="let col of colsProd">{{ col.header }}</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-rowData>
      <tr>
        <td style="width: 250px" *ngFor="let col of colsProd">{{ rowData[col.field] }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>