title: How to override correctly the row' style of PrimeNg Table?
body: <p>I have PrimeNg Table editable by columns and I would like to manage the style of my rows to fit with a specific line height, an overflow hidden and a background color hidden as well when the row is editable or not.</p>
  
  <p>My actual template is here :</p>
  
  <pre><code>&lt;p-table #dt class="menus-table" [value]="detail.items"&gt;
      &lt;ng-template pTemplate="header"&gt;
        &lt;tr class="menu-tr-header"&gt;
          &lt;th style="width: 20%"&gt;Label&lt;/th&gt;
          &lt;th style="width: 70%"&gt;URL&lt;/th&gt;
          &lt;th style="width: 10%"&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/ng-template&gt;
      &lt;ng-template pTemplate="body" let-rowData let-ri="rowIndex"&gt;
        &lt;tr class="menu-tr-content"&gt;
          &lt;td pEditableColumn&gt;
            &lt;p-cellEditor class="menu-cell-editable"&gt;
              &lt;ng-template pTemplate="input" &gt;
                  &lt;input pInputText type="text" [(ngModel)]="rowData.label"
                         [disabled]="mode == 'normal'"&gt;
              &lt;/ng-template&gt;
              &lt;ng-template pTemplate="output"&gt;
                  {{rowData.label}}
              &lt;/ng-template&gt;
            &lt;/p-cellEditor&gt;
          &lt;/td&gt;
          &lt;td pEditableColumn&gt;
            &lt;p-cellEditor class="menu-cell-editable"&gt;
              &lt;ng-template pTemplate="input"&gt;
                &lt;input pInputText type="text" [(ngModel)]="rowData.url"
                       [disabled]="mode == 'normal'"
                       placeholder="#/list/... " &gt;
              &lt;/ng-template&gt;
              &lt;ng-template pTemplate="output"&gt;
                {{rowData.url}}
              &lt;/ng-template&gt;
            &lt;/p-cellEditor&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/ng-template&gt;
    &lt;/p-table&gt;
  </code></pre>
  
  <p>And here is my css :</p>
  
  <pre><code>.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;
      }
  }
  </code></pre>
  
  <p>I don't really understand why menu-cell-editable isn't applyed and why I have a strange behavior when I pass from edit mode to normal mode and vice-versa as you can see below:</p>
  
  <p><a href="https://i.stack.imgur.com/NfCxn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NfCxn.png" alt="Off edit mode"></a></p>
  
  <p><a href="https://i.stack.imgur.com/3A4G3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3A4G3.png" alt="On edit mode"></a></p>