將網格線添加到primeng p-celleditor表

Question

我的 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>

但是，這不會在表格單元格上顯示任何網格線。 我嘗試了以下方法使它們出現，但它們只是沒有被顯示。 我錯過了什么嗎？ 或者不能在primeng單元格編輯器表中添加邊框？

table, th, td {
  border: 1px solid black;
}


.ui-datatable * {
  border: 5px black !important;
}

Answer 1

使用 CSS class 是一種解決方法：

.nsg-datatable-tr > td {
    padding: 0.571rem 0.857rem;
    border: 1px solid #c8c8c8;
}

我在沒有網格線的 header 中添加了一個添加行，如下所示：

    <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 前綴是我在自定義 CSS 上放置的公司縮寫，因此請適當更改。