I am using primeng ver 6.1.3
The last column on the table is short by 0.17px, here is an example of how it looks;
The expiry date cells are 47px in height. The cells in the actions column are 46.83px in height. If I try to increase the height with a specific css rule, somehow the browser or something in the rules always sets the cell 0.17px short. This even occurs with the !important modifier.
This column is static, that is to say that it doesn't display any information from the result set. It just contains buttons with click events on them. The other cells are populated from a loop. This is a snippet;
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns" [ngSwitch]="col.field">
<!-- other cols here -->
<div *ngSwitchCase="'expiryDate'">
<span *ngIf="rowData.expiryDate">{{rowData[col.field] | date:'dd/MM/yyyy'}}</span>
<span *ngIf="!rowData.expiryDate">No Expiry</span>
</div>
</td>
<td class="actions-column">
<p-button type="button" icon="fa fa-pencil" title="Edit Comment" (click)="showDialogToEdit(rowData)"></p-button>
<p-button type="button" icon="far fa-eye" title="View Comment" (click)="showDialogToEdit(rowData)"></p-button>
<p-button type="button" icon="fas fa-archive fa-lg" title="Archive Comment" (click)="archiveComment(rowData)"></p-button>
</td>
</tr>
I am not sure how this is happening. At best guess there is some kind of fixed property which prevents me from applying a height correctly. Not come across anything like this previously.
Cheers.
Edit : Just discovered the issue doesn't occur in Internet Explorer, only Chrome.