How to highlight a table's row and column when hovering over it?

Question

I would like to do the exact same thing as done in this example: http://jsfiddle.net/ThinkingStiff/rUhCa/.

However, when I try to change the background color of the table, the hover and highlight stops working.

Below you can see my code:

HTML

<table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td>
        <td>21</td>
        <td>23</td>
    </tr>
</table>

CSS

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

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

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

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

Fahey

Thank you very much for your feedback. I hope the code I added helps. – Fahey

Answer 1

Assuming this is something that you're looking for. You set z-index: -1 would hide the background highlighter when table has a background color as it has higher z-index value than negative values. But you really don't need them at all. You should use RGBA color - which specifies the opacity for a color to do the highlight works. Hope it helped!

table {
   border-spacing: 0;
   border-collapse: collapse;
   overflow: hidden;
   background-color: tomato;
}

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

tr:hover{
   background-color: rgba(255, 255, 0, 0.5);
}

td:hover::after,th:hover::after { 
   background-color: rgba(255, 255, 0, 0.5);
   content: '\00a0';  
   height: 10000px;    
   left: 0;
   position: absolute;  
   top: -5000px;
   width: 100%;   
}

<table>
    <tr>
        <th></th>
        <th>50kg</th>
        <th>55kg</th>
        <th>60kg</th>
        <th>65kg</th>
        <th>70kg</th>
    </tr>

    <tr>
        <th class="row">160cm</th>
        <td>20</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
        <td>27</td>
    </tr>

    <tr>
        <th class="row">165cm</th>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
        <td>26</td>
    </tr>

    <tr>
        <th class="row">170cm</th>
        <td>17</td>
        <td>19</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
    </tr>

    <tr>
        <th class="row">175cm</th>
        <td>16</td>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
    </tr>

</table>


























































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































<script>

/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */

var headerUri = 'https://mcmap.net/q/395932/-cols-colgroups-and-css-quot-hover-quot-pseudoclass/918414',
    headerCaption = 'cols, colgroups and css :hover psuedoclass';
    
document.body.insertAdjacentHTML( 
    'afterBegin',
      '<a href="' + headerUri + '" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: black;'
        + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'border: 1px solid black;'
        + 'border-radius: 2px;'
        + 'color: white;'
        + 'display: block;'
        + 'font: normal 15px/26px Helvetica, Verdana, Tahoma;'
        + 'height: 26px;'
        + 'left: 0px;'
        + 'opacity: 1;'
        + 'overflow: hidden;'
        + 'padding: 2px 8px;'
        + 'position: fixed;'
        + 'right: 0px;'
        + 'text-decoration: none;'
        + 'text-overflow: ellipsis;'
        + 'text-shadow: -1px -1px black;'
        + 'top: 0px;'
        + 'white-space: nowrap;'
        + 'z-index: 9999;'
    + '"><img '
    + 'style="' 
        + 'display: block;'
        + 'float: left;'
        + 'margin-right: 8px;" '
    + 'src="http://thinkingstiff.com/images/stackoverflow.png" />'
    + headerCaption
    + '</a>'
    );

document.body.insertAdjacentHTML( 
    'afterBegin', 
    '<a href="http://thinkingstiff.com" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: black;'
        + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'border: 1px solid black;'
        + 'border-radius: 2px;'
        + 'bottom: 0;'
        + 'color: white;'
        + 'display: block;'
        + 'font-family: Helvetica, Verdana, Tahoma;'
        + 'opacity: 1;'
        + 'padding: 4px 8px;'
        + 'position: fixed;'
        + 'right: 0;'
        + 'text-decoration: none;'
        + 'text-shadow: -1px -1px black;'
        + 'z-index: 999;'
    + '">thinkingstiff.com</a>' 
    ); 

document.head.insertAdjacentHTML( 'beforeEnd',
    '<style>'
    + 'body { margin-top: 40px !important; }'
    + '</style>'
    );
    
    
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23915674-6']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
    
</script>

Maim

Thank you very much! This is exactly what I needed! – Fahey

So, I'm having another issue. If I hover over any value and I try to hover over any value to the left of it, the highlight is not updated, it stays on the previously highlighted value. Can you please assist with this? – Fahey

Thanks you again K.C!! – Fahey

Instead of using arbitrarily large px values - using 200vh and -100vh does the trick, and will work even when screen resolutions exceed the excessive value in this answer. Also if your table is interactive, you'll probably want pointer-events: none – Pigmentation

@Pigmentation I originally had the same idea about 200vh and -100vh, but there are some edge cases where it isn't enough: 1. The cell's top be outside of viewport, even though the bottom part of the cell is still visible. 2. On my phone, :hover is also applied after tapping to some cell, even after the cell is outside of viewport. While #1 could be solved by pure CSS (use ::before for space above the cell and ::after for space below), I doubt about #2. – Stevens

very bad sample code. – Conventual

Answer 2

You can solve by adding pseudo elements and modifying your attached code.

table {
        width:100%;
        border-spacing: 0;
        border-collapse: collapse;
        overflow: hidden;
        z-index: 1;
    }
    
    td, th {
        cursor: pointer;
        padding: 10px;
        position: relative;
    }
    
    td:hover::before { 
        background-color: #ffa;
        content: '\00a0';  
        height: 100%;
        left: -5000px;
        position: absolute;  
        top: 0;
        width: 10000px;   
        z-index: -1;        
    }
    
    td:hover::after { 
        background-color: #ffa;
        content: '\00a0';  
        height: 10000px;    
        left: 0;
        position: absolute;  
        top: -5000px;
        width: 100%;
        z-index: -1;        
    }

 tr:nth-child(odd){
       background-color: rgba(1, 1, 0, 0.2);
}

 tr:nth-child(even){
       background-color: rgba(200, 1, 200, 0.2);
}

<table>
        <tr>
            <th></th>
            <th>50kg</th>
            <th>55kg</th>
            <th>60kg</th>
            <th>65kg</th>
            <th>70kg</th>
        </tr>

        <tr>
            <th class="row">160cm</th>
            <td>20</td>
            <td>21</td>
            <td>23</td>
            <td>25</td>
            <td>27</td>
        </tr>

        <tr>
            <th class="row">165cm</th>
            <td>18</td>
            <td>20</td>
            <td>22</td>
            <td>24</td>
            <td>26</td>
        </tr>

        <tr>
            <th class="row">170cm</th>
            <td>17</td>
            <td>19</td>
            <td>21</td>
            <td>23</td>
            <td>25</td>
        </tr>

        <tr>
            <th class="row">175cm</th>
            <td>16</td>
            <td>18</td>
            <td>20</td>
            <td>22</td>
            <td>24</td>
        </tr>

    </table>


























































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































    <script>

    /* by: thinkingstiff.com
    license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */

    var headerUri = 'https://mcmap.net/q/395932/-cols-colgroups-and-css-quot-hover-quot-pseudoclass/918414',
        headerCaption = 'cols, colgroups and css :hover psuedoclass';
        
    document.body.insertAdjacentHTML( 
        'afterBegin',
          '<a href="' + headerUri + '" '
        + 'target="_top" '
        + 'onmouseover="this.style.opacity=\'.95\'" '
        + 'onmouseout="this.style.opacity=\'1\'" '
        + 'style="'
            + 'background-color: black;'
            + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'border: 1px solid black;'
            + 'border-radius: 2px;'
            + 'color: white;'
            + 'display: block;'
            + 'font: normal 15px/26px Helvetica, Verdana, Tahoma;'
            + 'height: 26px;'
            + 'left: 0px;'
            + 'opacity: 1;'
            + 'overflow: hidden;'
            + 'padding: 2px 8px;'
            + 'position: fixed;'
            + 'right: 0px;'
            + 'text-decoration: none;'
            + 'text-overflow: ellipsis;'
            + 'text-shadow: -1px -1px black;'
            + 'top: 0px;'
            + 'white-space: nowrap;'
            + 'z-index: 9999;'
        + '"><img '
        + 'style="' 
            + 'display: block;'
            + 'float: left;'
            + 'margin-right: 8px;" '
        + 'src="http://thinkingstiff.com/images/stackoverflow.png" />'
        + headerCaption
        + '</a>'
        );

    document.body.insertAdjacentHTML( 
        'afterBegin', 
        '<a href="http://thinkingstiff.com" '
        + 'target="_top" '
        + 'onmouseover="this.style.opacity=\'.95\'" '
        + 'onmouseout="this.style.opacity=\'1\'" '
        + 'style="'
            + 'background-color: black;'
            + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
            + 'border: 1px solid black;'
            + 'border-radius: 2px;'
            + 'bottom: 0;'
            + 'color: white;'
            + 'display: block;'
            + 'font-family: Helvetica, Verdana, Tahoma;'
            + 'opacity: 1;'
            + 'padding: 4px 8px;'
            + 'position: fixed;'
            + 'right: 0;'
            + 'text-decoration: none;'
            + 'text-shadow: -1px -1px black;'
            + 'z-index: 999;'
        + '">thinkingstiff.com</a>' 
        ); 

    document.head.insertAdjacentHTML( 'beforeEnd',
        '<style>'
        + 'body { margin-top: 40px !important; }'
        + '</style>'
        );
        
        
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-23915674-6']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
        
    </script>

Intercross

This was fine but caused issues with my "sticky" menus... "overflow: clip" resolved my problem, here is the code: /* Column highlighting */ table { overflow: clip; } tr:hover, td:hover::before { background-color: rgba(255, 255, 0, 0.25); content: ""; } td:hover::before { position: absolute; left: 0; top: -300vh; height: 300vw; width: 100%; z-index: -1; } – Cowberry

Answer 3

I tried some of the code to do Column Highlighting, but I kept running into issues because I was using "sticky" menus which kept on breaking when I tried to use one of the suggested methods. "overflow: clip" for the Table property resolved my problem, and this is the code I ended up using:

/* Column highlighting */
table {
  overflow: clip;
  }
tr:hover,
td:hover::before {
  background-color: rgba(255, 255, 0, 0.25);
  }
td:hover::before {
  position: absolute;
  left: 0;
  top: -300vh;
  height: 300vw;
  width: 100%;
  z-index: -1;
  content: "";
  }

Alternative:

/* Column highlighting */
table {
  overflow: clip;
  }
tr:hover,
td:hover::before {
  background-color: rgba(255, 255, 0, 0.25);
  border: solid 1px #FFFF00;
  }
td:hover::before {
  position: absolute;
  left: 0;
  top: -300vh;
  height: 300vw;
  width: 100%;
  content: "";
  }

P.S. I actually really like removing the "z-index: -1" from the "td:hover" because it highlights the entire row and column (including 'even' rows, which I think is more the desired effect). I'd suggest trying both and seeing which you like more!

I hope this helps someone.

Cowberry