Highlighting Table Rows

Question

I have a dynamically built table that ends up with the below code (with example values):

<table id="patientTable" class="display" cellspacing="0" width="100%">
    <thead id="TableHeader">
        <tr>
            <th>Value1</th>
            <th>Value2</th>
            <th>Value3</th>
        </tr>
    </thead>
    <tbody id="tableContent">
        <tr class="clickable row_0" onclick="selectPatient(10001);" id="10001" style="background: #FFF;">
            <td class="tableContent">Value1</td>
            <td class="tableContent">Value2</td>
            <td class="tableContent">Value3</td>
        </tr>
    </tbody>
</table>

I am trying to highlight the row that is been hovered over using the below CSS:

.clickable :hover {
        background-color: #CCC;
    }

For some reason, this changes the background of what would be the "<td>" element, for example, will just highlight Value1, Value2 or Value3 rather than the entire row.

I have tried (to no avail) to use:

.clickable tr:hover {
    background-color: #CCC;
}
.clickable:hover {
    background-color: #CCC;
}
.tr:hover {
    background-color: #CCC;
}
.tr :hover {
    background-color: #CCC;
}

I find this unusual behaviour, as it appears to work for everyone else on every other example i've seen..

Worth Mentioning: The table is build from a complex system, that basically performs an AJAX request, which performs a PHP database query, takes the values, throws them into a JSON array, passes them back to JS, re-parses the array as JSON, loops through and creates the table, then outputs it. Could the JS be causing the issue?

The class name ".clickable", "row_#" (where # is a number) and the ID for the table row need to stay, as they are used in future functions and provide me with a way to identify each row individually.

score 5 · Accepted Answer · answered Aug 18 '15 at 15:08

5

One solution is to apply the hover on child elements td's when hover on parent tr:

.clickable:hover td {
  background-color: #CCC;
}

<table id="patientTable" class="display" cellspacing="0" width="100%">
  <thead id="TableHeader">
    <tr>
      <th>Value1</th>
      <th>Value2</th>
      <th>Value3</th>
    </tr>
  </thead>
  <tbody id="tableContent">
    <tr class="clickable row_0" onclick="selectPatient(10001);" id="10001" style="background: #FFF;">
      <td class="tableContent">Value1</td>
      <td class="tableContent">Value2</td>
      <td class="tableContent">Value3</td>
    </tr>
  </tbody>
</table>

answered Aug 18 '15 at 15:08

Alex Char

32,879
9
49
70

1

Spot on, that worked! I've literally spent an hour or so trying various methods for this.. and you solved it in less than a minute lol. Thank you. – Scott Thornton Aug 18 '15 at 15:09
Glad that I helped you. Please accept this answer when you can too :) – Alex Char Aug 18 '15 at 15:10
If you choose to color cells instead of row, make sure you don't have cellspacing in your table (in this example it seems ok). – Apolo Aug 18 '15 at 15:38

Apolo · Answer 2 · 2015-08-18T15:43:01.593

This works (from your question) :

.clickable:hover {
    background-color: #CCC;
}

but why is there nothing happening when you hover then ?

because this rule is overwritten by the inline style: style="background: #FFF;"

Hint : NEVER write inline style (except if you REALLY need it)

if you remove style="background: #FFF;" everything will be fine.

Working example :

.clickable {
    background-color: #FFF;
}

.clickable:hover {
    background-color: #CCC;
}

<table id="patientTable" class="display" cellspacing="0" width="100%">
    <thead id="TableHeader">
        <tr>
            <th>Value1</th>
            <th>Value2</th>
            <th>Value3</th>
        </tr>
    </thead>
    <tbody id="tableContent">
        <tr class="clickable row_0" onclick="selectPatient(10001);" id="10001">
            <td class="tableContent">Value1</td>
            <td class="tableContent">Value2</td>
            <td class="tableContent">Value3</td>
        </tr>
        <tr class="clickable row_1" onclick="selectPatient(10002);" id="10002">
            <td class="tableContent">Value1</td>
            <td class="tableContent">Value2</td>
            <td class="tableContent">Value3</td>
        </tr>
    </tbody>
</table>

Edit :

For more information about which CSS rule will have priority over others, see this article on MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Not strictly true, as SOMETHING does happen. The individual cells (the ``'s) are the elements that are taking the `:hover` attribute style. Resolved using Alex's answer. — Scott Thornton, Aug 18 '15 at 15:49
hover is an event that bubble from the more specific element (here the td or it's content) to its parent, until it reach the window element (or something stops it). So when the td get the hover event, it will send it to its parent (tr) and the whole row will be highlighted. (more info here http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) — Apolo, Aug 18 '15 at 15:55

Keugels · Answer 3 · 2015-08-18T15:41:28.990

-1

You can't colour table rows. Colour the table cells (th and td) instead, using the direct child selector (>).

Edit: Apollo (below) is right: Of course you can colour table rows, but if you want to colour the row with a hover, you need this (just like the answer that was given before):

tr:hover > td,
tr:hover > th {
    background-color:#ccc;
}

edited Aug 18 '15 at 15:41

answered Aug 18 '15 at 15:18

Keugels

790
5
15

1

table rows can have background colors – Apolo Aug 18 '15 at 15:20
I see, you're right. It's when you want to colour a row on a hover that you need to use the way I mentioned. Was a bit confused by the question and the number of times I've used my own answer. Colouring table rows is possible. :) – Keugels Aug 18 '15 at 15:39
see my answer, it's not a problem to change color on hover, OP just forgot the inline style that has priority over the CSS .class:hover selector – Apolo Aug 18 '15 at 15:41
True :) I don't know where my exception is coming from; I'm sure I've used it many times, but I've forgotten the actual usecase.. – Keugels Aug 18 '15 at 15:46

Highlighting Table Rows

3 Answers3

Edit :