Question

In a page I have many HTML tables that have many columns in them. I need to apply different styles on them. All columns will have different width but in tables they will same, by this I mean first column of all tables will be same, same is for second and all columns.

CSS is applied on tables but not on columns, is there a way I just add css classes and I may have not to apply them in html code and they are applied automatically. May be using
pseudocolumns or any other way ?

Answer 1

If you’re able to use browsers that support CSS nth-child(), you can use:

tr td:nth-child(even) {
    background-color: #ffa;
}

JS Fiddle demo.

In the above demo I’ve used :nth-child(even) to avoid styling the first of the td elements (which contains the row-heading), you could, of course, contain the row heading in a th element (which would probably be more semantically correct), or, to style the odd columns (or the odd td elements) but not the :first-child, the :not() selector is available:

tr td:nth-child(odd):not(:first-child) {
    background-color: #ffa;
}

JS Fiddle demo.

If you’re limited by having to support older browsers, that don’t support the :nth-child() pseudo-class, you can use the adjacent-sibling selector (though this is less maintainable):

td + td, /* styles the second td */
td + td + td + td { /* styles the fourth td */
    background-color: #ffa;
}

td + td + td { /* styles the third td */
    background-color: #fff;
}

JS Fiddle demo.

Thoug it’d be easier to style with classes (even if only provided for the odd (or the even):

.even { /* styles the cells with the class of 'even' */
    background-color: #ffa;
}

.even + td { /* styles the cell that follows the cell with the 'even' class */
    background-color: #f90;
}

You could also use the colgroup and col elements to define classes for your columns:

<table>
    <colgroup>
        <col class="first" />
        <col class="second" />
        <col class="third" />
        <col class="fourth" />
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th>Column one</th>
            <th>Column two</th>
            <th>Column three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row one</td>
            <td>row one, cell one</td>
            <td>row one, cell two</td>
            <td>row one, cell three</td>
        </tr>
        <tr>
            <td>Row two</td>
            <td>row two, cell one</td>
            <td>row two, cell two</td>
            <td>row two, cell three</td>
        </tr>
    </tbody>
</table>

With the following CSS as an example (note there’s no reason not to style the other col classes, I just chose not to in this demo):

.second, .fourth {
    background-color: #ffa;
}​

JS Fiddle demo.

References:

• Adjacent-sibling (+) combinator.
• col.
• colgroup.
• :first-child.
• :not().
• :not() compatibility, at Quirksmode.
• :nth-child().
• :nth-child() compatibility, at Quirksmode.