Can you define <col> tags (with classes) in CSS and apply them to multiple tables?

Is it possible to define the columns for a table of a specific class and reuse it?

For example, I have two tables on a page and I want their columns to align, so currently they both have defs like:

<table class='grid'>
    <col class='col-name' />
    <col class="col-access-type" />
  开发者_如何学C  <col class="col-auto-grant" />
    <col class="col-auto-revoke" />
    <col class="col-can-assign" />
    <col class="col-actions" />

but ideally I want to re-use the col tags by defining them once in say CSS so that I simply write:

<table class='grid'>

and in CSS:

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

Is that possible?

It seems to me that the answer you're looking for is CSS3snth-of-type()` selector.

This would allow you to do something like this:

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

etc.

However, the major problem with this is that it isn't supported in IE8 or lower, so unless your user demographic is wildly different from the norm, you're not going to be able to use it.

I don't know of any other solution that will allow you to avoid repeating your column structure. Sorry.

[EDIT]

Actually, probably nth-of-type() would be better than nth-child() in this case.

See http://www.quirksmode.org/css/contents.html for browser compatibility chart, and http://www.quirksmode.org/css/nthchild.html for usage (covers both nth-of-type and nth-child)

You could use a bit of jQuery script to do this, so for every table with the grid class if applies the required classes to the cols, e.g.

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