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 ); }; };
4 comments