Cols, colgroups and css ":hover" pseudoclass

col, css, html-table, xhtml

Solution

Here's a pure CSS method using no JavaScript.

I used `::before` and `::after` pseudo-elements to do the row and column highlighting. `z-index` keeps the highlighting below the `<td>`s in case you need to handle click events. `position: absolute` allows them to leave the confines of the `<td>`. `overflow: hidden` on the `<table>` hides the highlight overflow.

It wasn't necessary, but I also made it select just the row or column when you're in the headers. The `.row` and `.col` classes take care of this. If you wish the simplify, you can remove them.

This works in all modern browsers (and degrades gracefully on older browsers by doing nothing).

Demo: http://jsfiddle.net/ThinkingStiff/rUhCa/

Output:

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;        
}

HTML:

<table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">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>

Problem

I'm trying to create a table to display an individual's BMI. As a part of this, I'd like, on `:hover`, for the `<tr>` and `<col>` (or `<colgroup>`) to be highlighted also, in order for the intersection to be more apparent. As the table will feature both metric and imperial measurements, the :hover doesn't have to stop at the cell (from any direction) and would, in fact, be a bonus if it extended from one axis to the other. I'm also using the XHTML 1.1 Strict doctype, if this makes a difference? So... an example (the real table's... larger), but this should be representative: ``` <script> tr:hover {background-color: #ffa; } colgroup:hover, col:hover {background-color: #ffa; } </script> ``` ... ``` <table> <col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup> <tr> <th></th> <th>50kg</th> <th>55kg</th> <th>60kg</th> </tr> <tr> <td>160cm</td> <td>20</td> <td>21</td> <td>23</td> </tr> <tr> <td>165cm</td> <td>18</td> <td>20</td> <td>22</td> </tr> <tr> <td>170cm</td> <td>17</td> <td>19</td> <td>21</td> </tr> </table> ``` Am I asking the impossible, do I need to go JQuery-wards?

Original source