thinking stiff

Highlight <table> column on :hover using CSS with no Javascript

Posted in Programming by thinkingstiff on 2012/06/26

While HTML allows the :hover pseudo-class on <tr> elements, unfortunately the same does not hold true for <col> elements. All solutions I’ve seen to highlight columns in tables involve Javascript.

I’ve tried to solve this with CSS a couple of times before with no luck. I recently saw this question on Stackoverflow, cols, colgroups and css :hover psuedoclass, which was looking to highlight both rows and columns at the same time. I gave it a shot and was able to do it using the ::after pseudo-element and no Javascript.

I saw another question looking for just a column solution, html: hover table column, and I simplified the code to what you see below. This works in all modern browsers except Firefox, which requires a little tweak. The function firefoxFix() below takes care of this.

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

CSS:

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

td, th, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

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

HTML:

</pre>
<table>
<tbody>
<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>
</tbody>
</table>
<pre>

Firefox Fix:

function firefoxFix() {

    if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {

        var tds = document.getElementsByTagName( 'td' );

        for( var index = 0; index < tds.length; index++ ) {
            tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';                     
        };

        var style = '<style>'
            + 'td { padding: 0 !important; }' 
            + 'td:hover::before, td:hover::after { background-color: transparent !important; }'
            + '</style>';
        document.head.insertAdjacentHTML( 'beforeEnd', style );

    };

};
Tagged with: , , ,

4 Responses

Subscribe to comments with RSS.

  1. susan-bates@shaw.ca said, on 2012/06/30 at 7:00 AM

    I really liked your idea of a tumbler-like button (http://like-button.tumblr.com/) but it’s not working on my blog.
    My blog is http://englishinvancouver.blogspot.ca/
    The heart does not stay red when clicked. I copied and pasted code as you suggested, but it is not working. You mentioned you might be able to look at pages that are not working. Would this be possible?

  2. thinkingstiff said, on 2012/07/02 at 5:45 PM

    The code only works on Tumblr blogs.

  3. Ryan said, on 2013/06/14 at 10:09 AM

    Thanks for the neat solution. Took me a little while to understand it, but finally got it. I noticed a problem with adding borders though to the table. If you add a border to a table that has overflow set to hidden, the bottom borders are hidden. Still trying to figure out how to fix this. Suggestions welcome :) Thanks again.

  4. YaManicKill said, on 2014/01/08 at 2:12 AM

    To Ryan (can’t see a way to reply to the comment), if you set the table to be display: inline-block; that fixes the border issue (I had the same problem, and it took me ages to figure out what the *issue* was, nevermind solution).


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: