Testing "inheritance" of properties from col elements to cells

Test table
:first-child col style col class col align td class
42 000 00042 000 00042 000 00042 000 00042 000 000

For the test table, the following style sheet is used in order to affect the first column:

td:first-child {
       text-align: right;
       color: red;
       background: white;
       font-family: monospace; }

The following markup relates to the second column:
<col style="text-align: right; color: red; background: white; font-family: monospace;">

The third column has
<col class="foo">
and the page's style sheet contains the following:

.foo { text-align: right;
       color: red;
       background: white;
       font-family: monospace; }

The fourth column has, for comparison,
<col align="right">
and no style sheet applying to it.

The fifth column has
in each cell element (td or th) in it.


On Windows 98,
  1. For the first column, Opera 7.11 and Mozilla 1.3.1 apply the style sheet as intended (i.e. it is right-aligned, red on white, in monospace font), IE 6 ignores it.
  2. For the second column, IE 6 applies the style sheet, Opera and Mozilla ignore it
  3. For the third column, the behavior is as for the second.
  4. For the fourth column, IE and Opera right-align it, Mozilla does not.
  5. For the fifth column, all three browsers apply the style sheet.

Further testing

Optimistically, we might try to apply the combination method more generally. But when other columns than the first one are to be styled, we seem to face a strange IE bug. The following table has <col class="bar">, and there's the following style sheet:

.bar, td:first-child + td
 { text-align: right;
   color: green;
   background: #ffd; }

(On this test page, it's a bit more complicated, because the two tables on the page need to be styled differently. But this does not affect the results, i.e. this approach does not work on IE even if we simplify the rule to to the above.)

We expect this to work on all the browsers tested, but while Opera and Mozilla apply the style sheet, IE does not. Apparently the complex selector confuses it so thoroughly that it does not apply the rule at all.

42 000 00042 000 000

Writing two CSS rules, duplicating all the declarations, would help here, but it would be rather clumsy.


By HTML rules, <col align="right"> makes the cells in the column "inherit" the attribute align="right" in some (semi-)mystical way under some conditions. Since such inheritance is neither an SGML concept nor a CSS concept, we should be a little puzzled. The "inheritance" is described under a strange heading, Inheritance of alignment specifications, which actually mentions the following HTML attributes as "inherited": align, char, charoff; valign, lang, dir, style.

According to the CSS 2 specification (see 17.3 Column selectors), "Table cells may belong to two contexts: rows and columns. However, in the source document cells are descendants of rows, never of columns. Nevertheless, some aspects of cells can be influenced by setting properties on columns." The "aspects" influenced are border, background, width, and visibility properties. This is described as some exceptional rules that are applied in some special cases, not as normal inheritance.

Thus, to set the alignment of all cells in a column, we can use <col align="...">. But what can we do e.g. in order to set the font size for a column, except by using class or style attributes for each cell? Can we expect a style attribute set for <col> as "inherited" to the cells, so that it will take effect there, even for those properties that are not listed in the CSS specification as "influencing" cells when set for a column?