将网格线添加到primeng p-celleditor表

Question

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;
}

Answer 1

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;'>&nbsp;</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;'>&nbsp;</td>
    </tr>

nsg prefix is the company initials that I place on custom CSS, so change appropriately.