CSS и вложенные таблицы
У меня есть html-таблица, содержащая несколько других таблиц. Моя проблема заключается в том, что внутренние таблицы наследуют те же правила, что и внешняя таблица.
Есть ли способ преодолеть правила внешней таблицы? Я в основном хочу сказать внутреннюю таблицу:
Привет, внутренняя таблица. Ваше имя "X". Я хочу, чтобы вы все забыли о своей внешней таблице и ее правилах. Я хочу, чтобы вы следовали этим другим конкретным правилам.
Есть ли способ сделать это в HTML/CSS? Примеры?
Ответы
Ответ 1
table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
...
}
Это гарантирует, что только прямые дочерние элементы выбранной таблицы, а не вложенных таблиц, получат стили.
Ответ 2
Я предполагаю, что у вас есть следующие
HTML
<table class="outer-table">
<tr>
<td>
<table class="inner-table">
<tr>
<td>
I'm some content!
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS - Без класса /ID
table { border: 1px solid black; }
table tr td table { border: 1px solid green; }
Иногда вы можете уйти с:
table { border: 1px solid black; }
table table { border: 1px solid green; }
CSS - с классом/идентификатором
Небольшая заметка с классами и идентификаторами. Классы - это то, что может быть применено к как можно большему количеству элементов и нести указанный стиль. Идентификаторы должны использоваться только для одного элемента, так как это идентификация этого элемента. Это означает, что если у вас есть две вложенные таблицы, вам нужно предоставить этой второй таблице новый уникальный идентификатор.
Идентификаторы отображаются как # в CSS. Поэтому, если вы просто хотите использовать его для конкретного идентификатора, это будет:
#outer-table { /* Outer table Style */ }
#inner-table { /* Inner table Style */ }
Использование класса (как показывает пример) в CSS, является периодом. Если вы используете период без указания элемента, он будет использоваться для всех элементов, имеющих класс с тем же именем, поэтому лучше всего указать, к какому элементу вы хотите привязать.
table.outer-table { /* Outer table Style */ }
table.inner-table { /* Inner table Style */ }
Ответ 3
Самый простой способ - это класс и id. Обязательно используйте элемент.
table.outter { some: style; } /* class */
table#inner { some: style; } /* id */
Вы также можете использовать
table { some: style; }
table table { some: style; } /* override outter table */
или объединить два
table.outter { some: style; } /* class */
table.outter table#inner { some: style; } /* id */
Надеюсь, что это поможет.