The table view in Drupal Views is incredibly handy for displaying and ordering large amounts of data and allowing the user to interact with it. It comes out of the box with sortable columns which can be nicely ajaxified, any of the fields can be themed, made into links, etc - in other words all the flexibility of Views. However, as has happened to me quite often with Views, a client asked me for a piece of functionality that seemed quite obvious and natural to them, but which Views can't provide and which (apparently) couldn't be done using HTML/CSS. This client (www.myninetofive.com) wanted each row of the table to be a highlightable link to the node being displayed. In other words, not just the text within the cells, but the entire row, needed to light up when hovered over, and be clickable anywhere in the row.
A brief discussion on the drupal site contained a statement by one of the gurus to the effect of "You can't do this without using Javascript", and that statement was echoed in a couple of other threads I found. However, this is not the case as I discovered when some gentle pressure from the client encouraged me to go a little more deeply into the matter. Yes, you can't make an entire table row a clickable entity using HTML and CSS alone. However, using a mixture of Views functionality and CSS, you can simulate this behaviour to the point where the user will notice no difference!
The simple recipe is as follows. I'll presume at this point that you already have your view set up as a table and all styled the way you want it etc.
1. In Views, make every displayed cell in the table a link to its node.
2. In your CSS, use the following code for the links (modfying the selector as necessary in your case): .views-table tbody td a { display: block; width: 100%; height: 100%; }
3. Use the :hover pseudoclass on your table rows to make them highlight, e.g. tr:hover { background-color: yellow; }
Abracadabra! As far as I know, using :hover on table rows won't work in IE6, but I've tested it in IE7 and IE8, Firefox, Chrome, Opera and Safari. The whole point is that the table row is still not a clickable link as a whole, but since each link in each cell takes up the whole cell, and all the links go to the same place, and the whole row highlights when any link is hovered, the effect as far as the user is concerned is exactly the same. The only problem I can foresee is if you have wide cell spacing or padding that causes the links not to stretch to each others' edges, but you can play around with the CSS yourself to resolve small problems like these.
I found this trick at http://stackoverflow.com/questions/1460958/html-table-row-like-a-link and I think it's so useful and attractive that it could even be made part of the core Views offering (e.g. a tickbox "make whole row a highlightable link to the node" that activates the necessary links and CSS). Anyway, I didn't see anyone else offering this solution for drupal developers so I thought I would document it.
