Highlight <table> column on :hover using CSS with no Javascript
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, ::after
pseudo-element and no Javascript.
I saw another question looking for just a column solution, 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 ); }; };
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?
The code only works on Tumblr blogs.
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.
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).