Style the first col (all TD) using CSS?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

howa - 30 Sep 2007 08:24 GMT

Hello, I want to style the first column (i.e. all TD in the first col)
using CSS?

I have tried, e.g.

td:first-child { color: red; }

but not working, any suggestions?

thanks.

Reply to this Message

Safalra (Stephen Morley) - 30 Sep 2007 11:49 GMT

> Hello, I want to style the first column (i.e. all TD in the first col)
> using CSS?
[quoted text clipped - 4 lines]
>
> but not working, any suggestions?

The col element would be ideally suited to this, but unfortunately it only
allows the border, background, width, and visibility properties to be used.
If you need to set the text colour and need it to work in browsers without
support for first-child then you have two options: specify a class on the
first td in each tr (which has the best support, but will clutter your
HTML), or attach the style dynamically using JavaScript (which won't
clutter your HTML, but will require visitors to have JavaScript enabled).

Signature

Safalra (Stephen Morley)
http://www.safalra.com/web-design/

Reply to this Message

Jukka K. Korpela - 30 Sep 2007 12:40 GMT

Scripsit howa:

> Hello, I want to style the first column (i.e. all TD in the first col)
> using CSS?

Does that column actually consist of row headers? Then TH markup would be
more logical - and would make the styling easier.

> I have tried, e.g.
>
> td:first-child { color: red; }
>
> but not working, any suggestions?

Which browser(s) did you test it on? IE 6 and older don't support

:first-child, and even IE 7 doesn't in Quirks Mode. But in any modern

browser, for a document that complies with HTML specifications, it works. Of
course this might not be enough, since IE 6 is still the most popular
browser.

Then what's left is the clumsy way of using <td class="first"> in all the
cells of the column and using a class selector. With any decent web page
editor, modifying the markup is easy, so the clumsiness is only at the
markup level.

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Sherm Pendley - 30 Sep 2007 13:03 GMT

> Hello, I want to style the first column (i.e. all TD in the first col)
> using CSS?
[quoted text clipped - 4 lines]
>
> but not working, any suggestions?

If you're highlighting it because it's a heading, mark it up as such - use
th instead of td.

Not only is that more semantically appropriate, it also makes it trivial
to make your headings red:

th { color: red; }

sherm--

Signature

Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2007

Style the first col (all TD) using CSS?