angular primeng freeze header row with caption row above

1
votes

I'm using the primeng library with angular. I have the following code:

<p-table [value]="data">

    <ng-template pTemplate="caption">
        Some caption test
    </ng-template>

    <ng-template pTemplate="header">
      <tr>
       <th>Some column</th>
       <th>Some column1</th>
       <th>Some column2</th>
      </tr>
    </ng-template>

  ...Rest of table body here
</p-table>

When I go to set my table to [scrollable]="true" and scrollHeight="200px" The header row and caption row are no longer lined up. Is there any way to fix this?

1
angularscrollprimeng

1 Answers

0
votes

you can margin-right to caption header to line up with row header

<p-table styleClass="prime-table" [scrollable]="true" scrollHeight="200px">


.prime-table.ui-table .ui-table-caption.ui-widget-header {
   margin-right: 17px;
}