CSS и вложенные таблицы - PullRequest
Новая
       14

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

18 голосов
/ 29 октября 2011

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

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

Привет, внутренний стол. Вас зовут "X". Я хочу, чтобы вы забыли все о вашем внешнем столе и его правилах. Я хочу, чтобы вы следовали этим другим конкретным правилам.

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

Ответы [ 3 ]

21 голосов
/ 30 октября 2011 
table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
   ...
}

Это обеспечит получение стилей только прямыми дочерними элементами выбранной таблицы, а не вложенных таблиц.

5 голосов
/ 29 октября 2011

Я предполагаю, что у вас есть следующее

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 */ }
0 голосов
/ 06 октября 2016

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

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

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

...