Как выровнять несовпадающие заголовки p-таблицы в angular после включения прокрутки?

Question

У меня p-таблица с телом и. Перед включением прокрутки флажки в заголовке и теле и другие выравнивания заголовков были идеальными. Но после добавления [scrollable]=true и scrollHeight="200px" в тег p-table заголовки не совпадают со строками.

Ниже мой код для p-table:

<p-table [columns]="columns" [value]="values" [(selection)]="selectedRowData"
                 [scrollable]="true" scrollHeight="200px">
            <ng-template pTemplate="header" let-gridColumns>
                <tr>
                    <th style="width: 3em">
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th *ngFor="let col of gridColumns">
                        {{col.header}}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-gridColumns="columns">
                <tr>
                    <td>
                        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                    </td>
                    <td *ngFor="let col of gridColumns" style="word-break: break-all; max-width: 100px;">
                        {{rowData[col.field]}}
                    </td>
                </tr>
            </ng-template>
        </p-table>

может кто-нибудь мне помочь выравнивание заголовков с его строкой? Заранее спасибо