PrimeNG resizable columns with initial width causes other columns to resize too

Question

I have a PrimeNG table, that should have an initial column width. It should also be allowed to resize the columns. With the code below, when I resize 1 column, other columns resize in a strange and jumpy way too. How could this be fixed?

component.ts:

constructor() {
    this.tableColumns = [
      {
        field: 'a',
        header: 'A',
        width: '22px',
        type: "text"
      },
      {
        field: 'b',
        header: 'B',
        width: '30px',
        type: "date"
      },
      {
        field: 'c',
        header: 'C',
        width: '150px',
        type: "text"
      },
      {
        field: 'd',
        header: 'D',
        width: '190px',
        type: "text"
      },
      {
        field: 'e',
        header: 'E',
        width: '60px',
        type: "text"
      },
    ];
  }

component.html:

<p-table 
    [columns]="tableColumns"
    [value]="tableData"
    [sortField]="tableColumns[1]"
    [sortOrder]="-1"
    [scrollable]="true"
    [resizableColumn]="true
>
 
     <ng-template template="colgroup" let-columns>
        <colgroup>
          <col style="width: 20px;gap:5px;column-rule: black;">
          <col *ngFor="let col of columns" [style.width]="col.width"/>
        </colgroup>
     </ng-template>
     <ng-template template="header" let-columns>
        <tr>
          <th resizableColumn>Details</th>
          <th resizableColumn>A</th>
          <th resizableColumn sortableColumn="b">B</th>
          <th resizableColumn>C</th>
          <th resizableColumn>D</th>
          <th resizableColumn>E</th>
       </tr>
    </ng-template>

I tried various scenrios, but nothing worked. I am no expert in Angular, Typescript or Html. I am fairly new to Frontend Programming. I expect, when I resize 1 column, only this 1 column is resized without affecting other columns widths or positions.