Можете ли вы определить теги (с классами) в CSS и применить их к нескольким таблицам?

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Возможно ли определить столбцы для таблицы определенного класса и повторно использовать ее?

Например, у меня есть две таблицы на странице, и я хочу, чтобы их столбцы были выровнены, поэтому в настоящее время у них обеих есть определения типа:

 <table class='grid'>
    <col class='col-name' />
    <col class="col-access-type" />
    <col class="col-auto-grant" />
    <col class="col-auto-revoke" />
    <col class="col-can-assign" />
    <col class="col-actions" />

но в идеале я хочу повторно использовать теги col, определив их один раз, скажем, в CSS, чтобы я просто писал:

 <table class='grid'>

и в CSS:

 table.grid
{
 columns: {erm ok so what is it?}
}

Возможно ли это?

1. Не в HTML и CSS, нет (в любом случае, это не было бы задачей для CSS, потому что то, что вы хотите сделать, связано с контентом, а не с презентацией.) Это может быть возможно с использованием одного из предварительно скомпилированных псевдоязыков (например, HAML), хотя — готовы ли вы использовать что-то подобное?

2. Да, вы можете. Но это вопрос того, что работает, а что нет.

3. @Pekka, уверен, что HAML сохранит код СУХИМ, и я люблю HAML, но, увы, это невозможно для этого проекта.

Ответ №1:

Мне кажется, что ответ, который вы ищете, — это CSS3 s селектор nth-of-type()`.

Это позволило бы вам сделать что-то вроде этого:

 table.grid td:nth-of-type(1) { .... }
table.grid td:nth-of-type(2) { .... }
table.grid td:nth-of-type(3) { .... }

и т.д.

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

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

[ПРАВИТЬ]

На самом деле, вероятно, nth-of-type() было бы лучше, чем nth-child() в этом случае.

Смотрите http://www.quirksmode.org/css/contents.html для диаграммы совместимости браузера и http://www.quirksmode.org/css/nthchild.html для использования (охватывает оба nth-of-type и nth-child )

Ответ №2:

Для этого вы могли бы использовать немного скрипта jQuery, чтобы для каждой таблицы с grid классом if применялись требуемые классы к cols, например

 $(function() {
    $("table.grid col:eq(0)").addClass("col-name");
    $("table.grid col:eq(1)").addClass("col-access-type");
    // etc.
});