4 replies [Last post]
roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 2 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

I think I know the answer to this one, but just in case I've missed some new, ultra-clever CSS trickery of late...

Does anyone know of a non-JavaScript method (i.e. CSS) of changing the background colour of an entire row of table cells, and of making that entire row a clickable link?

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No! Change the tr under

No!

Change the tr under what circumstance, have you got any conditions that change that can produce a new class somewhere or body tag?

Cant think of a means to make a tr clickable, a tr is just a holder for cells.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 2 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

With the web apps that I

With the web apps that I develop, I often end up displaying complex tabulated data (not just simple lists) whereby each table row is logically linked to a database record that the user might want to see in more detail. Making one or more of the items of data into a clickable link is fine to a point, but the traditional effect of having the entire row a clickable link with a hover effect to aid usability is much more, well, 'usable'.

One solution is to make every item of data in the row into a link and then to set 'display' to 'block' and use :hover to change the background colour. But not only does that require a huge amount of extra mark-up, you also end up with just cell highlighting instead of row highlighting.

As much as I dislike using JavaScript for navigation, in this case it is not for a public website and the end (increased usability) justifies the means in my opinion:

1234
blar
blar
blar

As there are a few CSS experts out there frequently coming up with new solutions to old problems, I just wanted to check that this particular problem is still best solved with JavaScript.

Life's a b*tch and then you die!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE aside. :hover will work

IE aside. :hover will work for a TR. IE will play ball with whatever:hover. Clicking to display something else is really only feasible with javascript. The :focus tricks could work, but that would mean you would need to attach the extra content to every item on the row, as I don't think TR can receive focus.

Clicking to load another page requires an anchor or javascript. Its not something CSS can ever do.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

In Firefox, any element with

In Firefox, any element with a tab index ≥0 can have focus.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.