CODEWITHSUNDEEP
cssxhtmlhtml-tablecol
David Thomas
David Thomas

Reputation: 253318

Cols, colgroups and css ":hover" pseudoclass

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?

Upvotes: 41

Views: 18970

Answers (6)

Alex Mesker
Alex Mesker

Reputation: 51

Inspired by @ThinkingStiff's pure CSS method, here's an approach with the same output based on :has() pseudo-classes (and without needing ::before and ::after pseudo-elements). :has() support here.

Demo: https://jsfiddle.net/x37v/tf2a43k5/

HTML

<table>
  <colgroup>
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  
  <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>

CSS:

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td, th {
  cursor: pointer;
  padding: 10px;
  position: relative;
}

/*  Row rules: Excluding the top row, highlight any row that the mouse is over */
table:has(tr:not(:nth-child(1)):hover) tr:hover,

/*  Column rules: Highlight the respective columns on td:hover and th:hover (omitting the first column) */
table:has(td:nth-child(2):hover, th:nth-child(2):hover) col:nth-child(2),
table:has(td:nth-child(3):hover, th:nth-child(3):hover) col:nth-child(3),
table:has(td:nth-child(4):hover, th:nth-child(4):hover) col:nth-child(4),
table:has(td:nth-child(5):hover, th:nth-child(5):hover) col:nth-child(5),
table:has(td:nth-child(6):hover, th:nth-child(6):hover) col:nth-child(6) {
  background-color: #ffa;
}

Upvotes: 5

ThinkingStiff
ThinkingStiff

Reputation: 65341

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:

HTML table with highlighted row and column

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>

Upvotes: 72

Craig1123
Craig1123

Reputation: 1560

Live answer (https://jsfiddle.net/craig1123/d7105gLf/)

There are already CSS and JQuery answers; however, I have written a simple pure javascript answer.

I first find all the col and td tags, get the column index of each cell by doing element.cellIndex, and then add a CSS class with a background on mouseenter and removing it on mouseleave.

HTML

<table id='table'>
  <col />
  <col />
  <col />
  <col />
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Birthdate</th>
      <th>Preferred Hat Style</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Abraham Lincoln</td>
      <td>204</td>
      <td>February 12</td>
      <td>Stovepipe</td>
    </tr>
    <tr>
      <td>Winston Churchill</td>
      <td>139</td>
      <td>November 30</td>
      <td>Homburg</td>
    </tr>
    <tr>
      <td>Rob Glazebrook</td>
      <td>32</td>
      <td>August 6</td>
      <td>Flat Cap</td>
    </tr>
  </tbody>
</table>

CSS

body {
  font: 16px/1.5 Helvetica, Arial, sans-serif;
}

table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
}
table th {
  text-align: left;
}
table tr, table col {
  transition: all .3s;
}
table tbody tr:hover {
  background-color: rgba(0, 140, 203, 0.2);
}
table col.hover {
  background-color: rgba(0, 140, 203, 0.2);
}
tr, col {
  transition: all .3s;
}
tbody tr:hover {
  background-color: rgba(0,140,203,.2);
}
col.hover {
  background-color: rgba(0,140,203,.2);
}

JS

const col = table.getElementsByTagName('col');
const td = document.getElementsByTagName('td');

const columnEnter = (i) => col[i].classList.add('hover');
const columnLeave = (i) => col[i].classList.remove('hover');

for (const cell of td) {
    const index = cell.cellIndex;
    cell.addEventListener('mouseenter', columnEnter.bind(this, index));
    cell.addEventListener('mouseleave', columnLeave.bind(this, index));
}

Here is a fiddle

Upvotes: 3

Egli Becerra
Egli Becerra

Reputation: 1040

I came accross this neat way of doing it its from css-tricks.com I also prepared a fiddle whilst messing around with it nothing fancy but u can get the idea its with the same code provided by that css-trick page

//The Html

<table>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
</table>

//The Js

$(function(){
    $("table").delegate('td','mouseover mouseleave', function(e) {
        if (e.type == 'mouseover') {
          $(this).parent().addClass("hover");
          $("colgroup").eq($(this).index()).addClass("hover");
        }
        else {
          $(this).parent().removeClass("hover");
          $("colgroup").eq($(this).index()).removeClass("hover");
        }
    });
})

Check out the fiddle here

Upvotes: 2

Kieran Senior
Kieran Senior

Reputation: 18220

There is a very decent jQuery plugin I've come across located here which does a very good job of this kind of thing with loads of examples. Preferentially I'd use that.

Upvotes: 8

Eoin Campbell
Eoin Campbell

Reputation: 44268

AFAIK CSS Hovers on TR's aren't supported in IE anyway, so at best the TR part of that will only work in Firefox.

Never even seen a :hover work on a col/colgroup so not sure if that's possible...

Think you might be stuck with a Javascript implementation.

Theres an example here that works (rows & cols) in Firefox but again its broken in IE... cols don't work.

Upvotes: 4

Related Questions