CODEWITHSUNDEEP
javascripthtmlcss
alacy
alacy

Reputation: 5064

Highlight table row with different colors depending on their column

Is there a way using CSS3 or javascript to highlight a table row containing 2 elements where each table element is highlighted a different background color upon hovering over that row?

So for example you have a table row with two values like 

1.45 | 2.56

and the table element containing 1.45 would have a blue background and element containing 2.56 would be red.

At the moment I have it so it changes the background color for the entire row like so:

.graph-table tbody > tr:hover {
    background-color: #6ab1b0;
}

Upvotes: 1

Views: 981

Answers (3)

epicbro97
epicbro97

Reputation: 11

:nth-child(even){background-color: #ffd800;} or :nth-child(odd)

Upvotes: 1

jmore009
jmore009

Reputation: 12923

you can use :nth-of-type() like so:

tr td:nth-of-type(1):hover{
   background: red; 
}

tr td:nth-of-type(2):hover{
   background: blue;
}

EXAMPLE 1

And by targeting the td as a descendant of tr you can assure that it works on multiple rows:

EXAMPLE 2

Upvotes: 1

DaniP
DaniP

Reputation: 38252

Use :nth-child selector, like this:

td {
  padding: 15px;
}
tr:hover td {
  background-color: red;
  color: white;
  cursor:pointer;
}
tr:hover td:nth-child(1) {
  background-color: blue;
}
<table>
  <tr>
    <td>2.00</td>
    <td>3.45</td>
  </tr>
</table>

Upvotes: 2

Related Questions