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

Question

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

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

<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?}
}

Это возможно?

Answer 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 или ниже, поэтому, если демографический показатель пользователя сильно не отличается от нормы, вы не сможете его использовать.

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

[EDIT]

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

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

Answer 2

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

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