HTML Element Style How to - Change background color on rows, but not row headers when hover

Question

We would like to know how to change background color on rows, but not row headers when hover.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table tbody td:hover {<!--  w  w w.  ja  v  a  2 s  . c  o  m-->
  background: #f00;
}

table tbody tr:hover {
  background: #00f;
}
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The code above is rendered as follows: