html: hover table column [duplicate]

Answer 1

You can highlight the whole row with pure CSS using:

tr td {background-color: red;}
tr:hover td {background-color: blue;}

Achieving this effect for a column is impossible with this approach, as cell (td) is a child of a row (tr), not a column.

To make it work in IE7+, make sure to add doctype declaration (what you should always do anyway:)).

Answer 2

Just to extends Muhammads answer (https://stackoverflow.com/a/11828637/1316280), if you want to highlight the cols only in the actual table, change the jquery-code-part to: this jsfiddle is specific for only the actual table

jQuery

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $(this).parents('table').find('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $(this).parents('table').find('td:nth-child(' + t + ')').removeClass('highlighted');
});

jsFiddle: http://jsfiddle.net/q3HHt/123/

Answer 3

Only works for cells or rows, sorry. e.g.

td {
  background-color: blue;
}

td:hover {
  background-color: red;
}

There are JavaScript solutions available but nothing in CSS right now will do what you want because of the limitations of selectors.

td  /* all cells */
{ 
  background-color: blue;
}

tr /* all rows */
{
  background-color: pink;
}

/* nothing for all columns */

Answer 4

I had a similar problem where I had too many columns to display on screen. VIA PHP, I turned each row into a 1 x column table. So, n rows = n tables. I then nested each table within a master table. Doing so allowed me to call td:hover from my stylesheet. Since each td held a table, it has the same effect of highlighting the a column when I mouse over it.

Answer 5

I do not think there is a clean HTML + CSS way to do this. Javascript is an alternative, for example the jQuery tableHover plugin

Answer 6

You can try experimenting with <col> tag and col:hover { background: red; } style, but I doubt that it will work. Anyway, this definitely won't work in older versions of MSIE, so you will need javascript in order to do this.