Удалить границы во вложенной таблице

Question

Как можно предотвратить наследование границ во вложенной таблице?

Я пытался добавить класс без полей к вложенной таблице, но границы родительского класса по-прежнему наследуются.

.plain_tbl {
  border: none;
}

.plain_tbl tr td {
  border: none;
}

.tbl {
  border: 1px solid;
}

.tbl tr td {
  border: 1px solid;
}

<table class="tbl">
  <tr>
    <td align=center style="padding:50px">
      <table border=0 class="plain_tbl">
        <tr>
          <td>0--------------------100</td>
        </tr>
        <tr>
          <td align=center> ^ <br>50</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Я ищу решение, которое не меняет родительский класс, т. Е. Как сделать так, чтобы вложенный класс перезаписывал родительский класс

Answer 1

У вас есть проблема

.tbl tr td {
  border: 1px solid;
}

, которая добавляет границу к каждому <td>, также если это таблица внутри таблицы, вы можете исправить ее, используя

.tbl > tr > td {
  border: 1px solid;
}

.plain_tbl {
    border: none;
}
.plain_tbl tr td {
  border: none;
}

.tbl {
    border:1px solid;
}
.tbl > tr > td {
  border: 1px solid;
}

<table class="tbl">
    <tr>
        <td align=center style="padding:50px">

    <table border=0 class="plain_tbl">
    <tr><td>0--------------------100</td></tr>
    <tr><td align=center> ^ <br>50</td></tr>
    </table>

</td>
</tr>
</table>

Обновление, другое решение, чем предыдущее, с использованием специфики

В комментариях вы задали

почему вложенный класс не перезаписывает родительский класс?

Причина: Специфика и порядок ваших CSS правил. Если вам не разрешено изменять порядок CSS, вы можете изменить специфику. Вам нужно быть более точным c, чем этот

.tbl tr td {
  border: 1px solid;
}

Чтобы быть более точным c, вы можете изменить его следующим образом:

.tbl .plain_tbl tr td {
    border: none;
}

запустите фрагмент кода и посмотрите, как он работает

.plain_tbl {
    border: none;
}
.tbl .plain_tbl tr td {
  border: none;
}
.plain_tbl tr td {
  border: none;
}

.tbl {
    border:1px solid;
}
.tbl tr td {
  border: 1px solid;
}

<table class="tbl">
    <tr>
        <td align=center style="padding:50px">

    <table border=0 class="plain_tbl">
    <tr><td>0--------------------100</td></tr>
    <tr><td align=center> ^ <br>50</td></tr>
    </table>

</td>
</tr>
</table>

Третий метод, только изменение порядка вашего css, поскольку оба правила на самом деле имеют одинаковую специфичность, вы также можете просто разместить Правило .plain_tbl tr td после .tbl tr td { в вашем css файле выглядит так:

.plain_tbl {
  border: none;
}

/*
move this to the bottom
.plain_tbl tr td {
  border: none;
}
*/

.tbl {
  border: 1px solid;
}

.tbl tr td {
  border: 1px solid;
}

/* see here */
.plain_tbl tr td {
  border: none;
}

<table class="tbl">
    <tr>
        <td align=center style="padding:50px">

    <table border=0 class="plain_tbl">
    <tr><td>0--------------------100</td></tr>
    <tr><td align=center> ^ <br>50</td></tr>
    </table>

</td>
</tr>
</table>

Answer 2

Ваша проблема связана с порядком правил, поскольку .tbl td является более общим, оно также применяется к внутреннему элементу, и, поскольку применяется последнее правило, оно переопределяет предыдущее правило, которое является более конкретным c правило так просто переставь свой css и исправь

.tbl {
  border: 1px solid;
}

.tbl tr td {
  border: 1px solid;
}

.plain_tbl {
  border: none;
}

.plain_tbl tr td {
  border: none;
}

<table class="tbl">
  <tr>
    <td align=center style="padding:50px">
      <table border=0 class="plain_tbl">
        <tr>
          <td>0--------------------100</td>
        </tr>
        <tr>
          <td align=center> ^ <br>50</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 3

Вы можете полностью удалить класс plain_tbl и просто применить границу к ячейкам таблицы, которые находятся в строках, которые являются прямыми потомками вашей основной таблицы:

.tbl,
.tbl > tr > td {
  border: 1px solid;
}