html: hover table column [duplicate]

by

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>

More Related Contents:

  1. jQuery .animate function not responding properly
  2. Hover over image to get a box with multiple links in html/JavaScript
  3. Reloading a single div in an html page [closed]
  4. How do you inject this code into HTML using Javascript?
  5. how to proportionally scale a div with images inside?
  6. How to create blog posts with HTML and CSS? [closed]
  7. fixing slider on my website [closed]
  8. Full-screen iframe with a height of 100%
  9. Navbar dropdown (collapse) is not working in Bootstrap 5
  10. How To Get Font Size in HTML
  11. Simulation background-size: cover in canvas
  12. How to Increase browser zoom level on page load?
  13. Change an image with onclick()
  14. How to select nth line of text (CSS/JS)
  15. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  16. execCommand() is now obsolete, what’s the alternative?
  17. How to create a custom scrollbar on a div (Facebook style)
  18. Why element.style always return empty in JS?
  19. Multicolor Text Highlighting in a Textarea or Text Input
  20. HTML book-like pagination
  21. Creating a select box with a search option
  22. Passing mouse clicks through an overlaying element
  23. How to make text over flow into two columns automatically
  24. How to resize Twitter Bootstrap modal dynamically based on the content
  25. Wait cursor over entire html page
  26. Retain scrollbar position even after reloading using javascript
  27. assign color to mouse cursor using CSS
  28. Center an Image vertically and horizontally using CSS
  29. Change background on button click, using CSS only? [duplicate]
  30. Jquery/Javascript Opacity animation with scroll

Leave a Comment