Previous Message
Next Message

RE: [css-d] Styling the third column of a table

Sent by Saila, Craig on 30 January 2003 18:06


Francois Gagnon wrote:
> I want to style the third column of a table, but without
> using a class on the 400 rows. Is there a way that would work
> on all browser post NN4 that would do such a thing ?

Surprisingly, it's quite tricky. In most browsers (IE, Opera 7), if you
use COLGROUP, and then apply a style to the third columns' COLGROUP this
works:
 .column { background: red; }

Sample HTML:
 <colgroup></colgroup> 
 <colgroup></colgroup> 
 <colgroup class="column"></colgroup> 
 <tr> 
  <td>1</td> 
  <td>2</td> 
  <td>3</td> 
 </tr> 

Mozilla (and other Gecko-based browsers) and Opera 6 don't seem to like
that so you need to do this:
 td+td+td { background: red; }
 td+td+td+td { background: inherit; } /*Revert rest of columns to
previous colour, if Opera 6 needs to be support you must hard code the
background colour*/

(Above is for three TD's in the row. If you had a TH in the first column
it would be:
 th+td+td { background: red; })

If the column is the last TD in the row, you can use the CSS3 selector
(supported by Mozilla):
 td:last-child { background: red; )

For most post-NN4 browsers this works best:
 .column, td+td+td { background: red; } 
 td+td+td+td { background: inherit; }

-- 
Cheers,

Craig Saila
------------------------------------------
[EMAIL-REMOVED] : http://www.saila.com/
------------------------------------------
Previous Message
Next Message

Possibly related: