Подтвердить что ты не робот

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 */

Надеюсь, что это поможет.