html: hover table column

Question

How can I change the background column of an html table column when the mouse is over it?

Preferably with css only.

Here is a great post (not mine): https://css-tricks.com/simple-css-row-column-highlighting/ — THX1137, Apr 02 '21 at 04:39

ThinkingStiff · Answer 1 · 2015-02-18T23:52:49.220

54

This can be done using CSS with no Javascript.

I used the ::after pseudo-element to do the highlighting. z-index keeps the highlighting below the <tds> in case you need to handle click events. Using a massive height allows it to cover the whole column. overflow: hidden on the <table> hides the highlight overflow.

Demo: http://jsfiddle.net/ThinkingStiff/2XeYe/

Output:

enter image description here

CSS:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

HTML:

<table>
    <tr>
        <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
    </tr>
    <tr>
        <th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

edited Feb 18 '15 at 23:52

answered Jun 24 '12 at 09:25

ThinkingStiff

64,767
30
146
239

2

I am not sure your FF fix worked. The body's background changes to yellow rather than just the column on hover. – carmenism Aug 15 '12 at 18:45
@vulpix This works for me on FF14 on OS X. – ThinkingStiff Aug 15 '12 at 19:25
-1 Does not work with IE at all. – Boris Yankov Jan 28 '13 at 04:48
@BorisYankov Works in IE9 on Windows7 for me. – ThinkingStiff Jan 28 '13 at 05:26
Wasn't working on IE10. Tested with IE Tester and it appears it works _only_ on IE9, not on older, not on newer. I admit, quite weird. – Boris Yankov Jan 28 '13 at 05:40
1

This works great in all the browsers I tested (IE9, IE11, FF, Chrome) - the FF fix seems to be no longer necessary :-) – Niko Feb 17 '15 at 13:18
1

Its not working with bootstrap. – RN Kushwaha Jan 17 '16 at 16:32
Please note that when this solution is used, returning back to higher cell can not be done with the same effect. `:hover` selector won't work on table cells above the one selected. It may not be a problem when highlighting just the column alone. – user35443 Jul 26 '16 at 17:06
Great trick. I would just update it a bit by using `height: 200vh;` and `width: -100vh` instead of `height: 10000px;` and `width: -5000px;` – rdromao Mar 12 '20 at 13:53

score 18 · Answer 2 · edited Dec 04 '15 at 22:23

18

I have a more simple solution (Live example: http://jsfiddle.net/q3HHt/1/)

HTML:

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
  </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
  </tr>
</table>

CSS:

table, td {
    border: 1px solid black;
}

td {
    width: 40px;  
    height: 40px;
}

.highlighted {
    background-color: #348A75;
}

jQuery:

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

Live example: http://jsfiddle.net/q3HHt/1/

edited Dec 04 '15 at 22:23

CoderPi

12,985
4
34
62

answered Aug 06 '12 at 12:49

M. Ahmad Zafar

4,881
4
32
44

1

Use `$('td:nth-child(' + t + ')', $(this).closest('table')).addClass('highlighted');` to prevent all the tables on the page from being highlighted if you have multiple. – sushain97 Aug 25 '13 at 00:58
Yes correct but a better way would be to use `id` attribute – M. Ahmad Zafar Aug 26 '13 at 05:19
Wouldn't that require individual listeners for each table? I just went for the simple route without editing my HTML and thought it may be useful for anyone finding this answer via Google (as I did). – sushain97 Aug 26 '13 at 21:04
1

$('td').hover(function() { $('table td:nth-child('+ ($(this).index()+1) +')').toggleClass('highlighted'); }); – arsh Jun 25 '16 at 10:16
combine with this syntax for dynamic content hover: https://stackoverflow.com/a/14056759/5924640 – Exceptional NullPointer Aug 02 '19 at 14:03

score 8 · Accepted Answer · edited Dec 04 '15 at 23:15

8

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 */

edited Dec 04 '15 at 23:15

CoderPi

12,985
4
34
62

answered Oct 12 '09 at 09:32

Jonathan Fingland

56,385
11
85
79

1

Actually you can style columns using either the sibling selector (gets a little messy) or CSS3's `nth-child` (no IE support). You still can't do it on hover though, because you're only ever hovering on a cell or row, not a column. – DisgruntledGoat Oct 12 '09 at 16:10

score 6 · Answer 4 · edited May 23 '17 at 12:00

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/

score 2 · Answer 5 · answered Oct 12 '09 at 09:32

2

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

answered Oct 12 '09 at 09:32

wiifm

3,787
1
21
23

score 2 · Answer 6 · answered Mar 25 '10 at 15:10

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.

score -2 · Answer 7 · answered Oct 12 '09 at 09:32

-2

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.

answered Oct 12 '09 at 09:32

n1313

20,555
7
31
46

3

`col:hover` doesn't seem to work in firefox 3.5, though `col { background-color:blue; }` does – Jonathan Fingland Oct 12 '09 at 10:03

score -4 · Answer 8 · edited Jun 20 '12 at 16:32

-4

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:)).

edited Jun 20 '12 at 16:32

Jon Lin

142,182
29
220
220

answered Jun 20 '12 at 10:58

Johnny

11

Doesn't answer the question – m.e.conroy Mar 05 '15 at 16:21

html: hover table column

8 Answers8

Linked