Как правильно переопределить стиль строки таблицы PrimeNg?

Question

У меня есть PrimeNg Table, редактируемый по столбцам, и я бы хотел, чтобы стиль моих строк соответствовал заданной c высоте строки, скрытому переполнению и скрытому цвету фона, когда строка редактируемая или нет.

Мой фактический шаблон здесь:

<p-table #dt class="menus-table" [value]="detail.items">
    <ng-template pTemplate="header">
      <tr class="menu-tr-header">
        <th style="width: 20%">Label</th>
        <th style="width: 70%">URL</th>
        <th style="width: 10%">Actions</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-ri="rowIndex">
      <tr class="menu-tr-content">
        <td pEditableColumn>
          <p-cellEditor class="menu-cell-editable">
            <ng-template pTemplate="input" >
                <input pInputText type="text" [(ngModel)]="rowData.label"
                       [disabled]="mode == 'normal'">
            </ng-template>
            <ng-template pTemplate="output">
                {{rowData.label}}
            </ng-template>
          </p-cellEditor>
        </td>
        <td pEditableColumn>
          <p-cellEditor class="menu-cell-editable">
            <ng-template pTemplate="input">
              <input pInputText type="text" [(ngModel)]="rowData.url"
                     [disabled]="mode == 'normal'"
                     placeholder="#/list/... " >
            </ng-template>
            <ng-template pTemplate="output">
              {{rowData.url}}
            </ng-template>
          </p-cellEditor>
        </td>
      </tr>
    </ng-template>
  </p-table>

А вот мой css:

.menus-table-header {
    margin: 15px 0;

    nav {
        background-color: #f4f4f4;
        border-color: #f4f4f4;
    }   
}

.menus-table {
    th, td {
        background-color: transparent;
        border: none;
    }

    .menu-tr-header {
        border-bottom: 2px solid #ddd;
    }

    .menu-tr-content {
        border-bottom: 1px solid #ddd;
        background-color: transparent;
    }

    .menu-cell-editable {
        background-color: transparent !important;
        font-weight: bold;
        overflow: hidden;
        width: 100%;
        line-height: 1.42857143;
    }
}

Я не очень понимаю, почему редактируемые ячейки меню редактируются не применяется и почему у меня странное поведение при переходе из режима редактирования в обычный режим и наоборот, как вы можете видеть ниже: