I have the following primeng table in my html:
<p-table
#dt1
[value]="data"
styleClass="p-datatable-gridlines"
>
<ng-template pTemplate="header">
<tr>
<ng-container *ngFor="let column of columns"><th>
{{ column.label }}
</th>
</ng-container>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td
pEditableColumn
*ngFor="let column of columns"
>
<p-cellEditor>
<ng-template pTemplate="input">
<input
pInputText
class="p-inputtext"
type="text"
[(ngModel)]="row[column.field_name]"
/>
</ng-template>
<ng-template pTemplate="output">
{{ row[column.field_name] }}
</ng-container>
</ng-template>
</p-cellEditor>
</ng-container>
</td>
</tr>
</ng-template>
</p-table>
However, this isn't displaying any gridlines on the table cells. I have tried the following to make them appear, but they just aren't being shown. Am I missing something? Or can borders not be added to primeng cell editor tables?
table, th, td {
border: 1px solid black;
}
.ui-datatable * {
border: 5px black !important;
}
Using a CSS class is a workaround:
.nsg-datatable-tr > td {
padding: 0.571rem 0.857rem;
border: 1px solid #c8c8c8;
}
I have added a add row in my header that did not have gridlines as follows::
<tr *ngIf='addRowHeaderShow' class='nsg-datatable-tr'>
<td style='width: 45px;'> </td>
<td style='width: 120px;'>
<button pButton type='button' icon='pi pi-check' class='p-button-success' style='margin-right: .5em' (click)='onAddRowSave()'></button>
<button pButton type='button' icon='pi pi-times' class='p-button-danger' (click)='onAddRowCancel()'></button>
</td>
...
<td style='width: 65px;'> </td>
</tr>
nsg prefix is the company initials that I place on custom CSS, so change appropriately.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.