Table column gridlines are not aligned when scrollable is equal to true

[dhamzic]

I need to freeze the Table header when the user is scrolling vertically. To do that, I'm using (in p-table tag)

Code: Select all

[scrollable]="true"  scrollHeight="calc(100vh - 21rem)"

When I add scrollable to the p-table tag, column gridlines are not aligned. Without scrollable property, column gridlines look just fine.

Table without [scrollable]="true"


Table with [scrollable]="true"


Finally, here is p-table tag code snippet:

Code: Select all

<p-table #dt [value]="comments" [columns]="cols" [scrollable]="true" scrollHeight="calc(100vh - 21rem)"
    styleClass="p-datatable-gridlines" [rowHover]="true"
	[rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]"
	[paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">