Блог

Главная - Вопросы по программированию - CSS и вложенные таблицы

CSS и вложенные таблицы

#html #css #nested #css-tables

#HTML #css #вложенные #css-таблицы

Вопрос:

У меня есть html-таблица, которая содержит несколько других таблиц. Моя проблема в том, что внутренние таблицы наследуют те же правила, что и внешняя таблица.

Есть ли способ обойти правила внешнего стола? Я в основном хочу рассказать о внутренней таблице:

Привет, внутренняя таблица, Тебя зовут «X». Я хочу, чтобы вы полностью забыли о своем внешнем столе и его правилах. Я хочу, чтобы вы следовали этим другим конкретным правилам.

Есть ли способ сделать это в HTML / CSS? Примеры?

Комментарии:

1. Лучше всего было бы научиться создавать макеты страниц с помощью CSS и <div> ‘s вместо вложенных таблиц. Теперь это правильный способ создания макетов.

2. Я ненавижу поддерживать старый код, который полон вложенных таблиц ><;

3. table {/*rules*/} и table table {/*other overriding rules*/} вот как это делается?

4. О каких правилах вы говорите? Можете ли вы показать какой-нибудь код?

5. @Sparky даже сегодня (2,5 года спустя) некоторые данные по-прежнему являются табличными. И время от времени приходится иметь дело с данными, которые имеют более двух измерений. Кроме того, проблема OP не становится ни лучше, ни хуже, когда разметка, например div.outer > div.row > div.cell > div.inner > div.row > div.cell , вместо table.outer > tr > td > table.inner > tr > td .

Ответ №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 — без класса / идентификатора

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

Комментарии:

1. Что плохого в том, чтобы вместо этого присваивать таблицам классы и / или идентификаторы?

2. Нет ничего плохого в присвоении классов и / или идентификаторов элементам, это рекомендуется! Хотя я работал над несколькими проектами, где мы никак не могли изменить разметку. Просто измените внешнюю таблицу стилей. Я просто предполагал кое-что (3 часа ночи>.<)

3. Я начинаю видеть закономерность. Хотя я намерен использовать имена классов как минимум. Как table table { format stuff; } выглядит, когда применяются имена классов?

4. Это было бы просто <table class=»myclass»>…</table> . Тогда ваш CSS будет table.mycalss { /* style */ } . Я добавлю это к ответу, чтобы вы могли понять, как обстоит дело.

5.совет @cumbo мудрый. я сделал эти примеры прошлой ночью; это одна и та же таблица, только если она намного глубже, чем другая, вы можете точно видеть, что там происходит. jsfiddle.net/jalbertbowdenii/bMZfv jsfiddle.net/jalbertbowdenii/bMZfv/13 они не являются вложенными таблицами, поэтому это комментарий, а не ответ; в любом случае, вы можете легко настроить их именно так.

Ответ №3:

Самый простой способ — это класс и идентификатор. Обязательно используйте элемент.

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

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

Метки: