остановка наследования таблиц

Question

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

Если у меня есть таблица с

<table align='center' class='tab1' ....
<tr> <td> ...<table class='tab2' ....

.tab table, .tab th, .tab tr, .tab td { 
padding: 0;
margin:0;
vertical-align: top;
font-size: 11px;
line-height: 15px;
padding-top: 5px;
padding-bottom: 5px;
}

.tab table {
border-collapse: collapse;  
font-size: 11px;
border: 1px solid #999;
table-layout: fixed;
}

---

Я думаю, что должен был сказать вам, что именно перечисляет моя таблица, прежде чем я начну просить о помощи. Моя таблица перечисляет информацию, повторяемую до конца. Для каждой строки есть скрытый элемент div, который позволяет просматривать информацию при нажатии кнопки для связанной строки. Вот где я хотел использовать другую таблицу, чтобы расположить таблицу из 3 столбцов в моей родительской таблице. Подумав об этом, я предпочитаю не иметь вложенных таблиц. Теперь вы сказали, что есть другой лучший способ сделать это. Я предполагаю, что лучше использовать div и использовать свойства позиции для определенных элементов в строке.

Пример моего вывода показан ниже:

name - title                                     view edit
email - country
----hidden info-----
address ......              alternate email                 notes...
............                other info.....
.............               other info .....

Answer 1

Селектор, который вы ищете, будет выглядеть так:

table#mytable > tr > td {
  ...your properties
}

Шевроны (>) обеспечивают назначение свойств только непосредственным детям, а не внукам. это означает, что tr и td для дочерней таблицы не будут выбраны.

НО, я предостерегаю вас от использования таблиц для позиционирования ... в зависимости от программы чтения с экрана, слабовидящие пользователи могут слышать всевозможные странные результаты. Возможно, вы захотите учесть их опыт в будущем.

Answer 2

Я бы дал первой таблице идентификатор и вставил бы этот идентификатор в ваши селекторы (например, .tab table#mytable).

Обновление

<table id="outer">
  <tr>
    <td>
      <table id="inner">
        <tr>
          <td>Content here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

... elsewhere

table#outer tr td {
  background: blue;
  padding: 10px;
  border: 5px solid #0000AF;
}
table#inner tr td {
  background: red;
  padding: 3px;
  border: 5px solid #AF0000;
}

Просто поместите идентификаторы в обе таблицы, и каждый раз, когда вы пишете правило CSS, вставляйте идентификатор таблицы в селектор. Таким образом, вы можете легко переопределить стили на внешней таблице.

Причина, по которой это так многословно, заключается в том, что в IE вы не можете использовать селекторы, такие как table#outer > tr > td, для охвата только прямых потомков #outer. Да, это очень раздражает.

Реальный ключ здесь (я согласен с btelles на 100% здесь): не используйте таблицу внутри таблицы только для позиционирования .