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

Question

Древовидная таблица jquery использует

table.treetable tbody tr td {
  ...
  padding: .3em 1em;
  ...
}

Интересно, как я могу предотвратить распространение padding-left 1em в подстолях:

    <table class="treetable">
      <tbody>
        <tr><td>
          <table class="inner"><tr><td class='nopad'>content</td></tr></table>
        </td></tr>
      </tbody>  
    </table>

Я хочу <td class='nopad'>иметь padding-left : 0px;. Я пробовал несколько вещей, например .nopad { padding-left: 0px; }, но кажется, что отступ из древовидной таблицы распространяется и переопределяет любые настройки.

Answer 1

Просто установите ваши значения отступа обратно на initial для вложенного td. Это семантика в том, что вам не нужно менять DOM, добавляя дополнительные классы.

table.treetable tbody tr td td {
  padding: initial;
}

Answer 2

Будет отменено, когда вы создадите ту же или более глубокую область. Как это:

table.treetable tbody tr td.nopad {
  padding-left:0;
}