Styling table columns, Gecko vs. IE?

Last changed: 2005-12-01

1. The <col> way

Supported by Internet Explorer (tested with 5.0 and 6.0). Supported by Opera (tested with 6.0x, 7.5x, 8.x and 9.0). Supported by Firefox 1.5. Not supported by Mozilla (tested with 1.6) and Firefox 1.0.x.

<style type="text/css">
  .col1 { background-color: red; }
  .col2 { background-color: blue; }
</style>
<table>
  <col class="col1" />
  <col class="col2" />
  …
</table>

2. The CSS 2 way

Supported by Mozilla (tested with 1.6) and Firefox (tested with 0.8, 1.0.x and 1.5). Supported by Opera (tested with 7.5x, 8.x and 9.0). Not supported by Internet Explorer (tested with 6.0 SP2).

<style type="text/css">
  td:first-child { background-color: red;  }
  td + td        { background-color: blue; }
</style>
<table>
  …
</table>

3. Combining both ways

Supported by all browsers? (Tested with all browsers listed above.)

<style type="text/css">
  td:first-child, .col1 { background-color: red;  }
  td + td,        .col2 { background-color: blue; }
</style>
<table>
  <col class="col1" />
  <col class="col2" />
  …
</table>