Cambiar el color de fondo en las filas, pero no en los encabezados de las filas

Question

Estoy intentando cambiar el color de fondo de las filas de una tabla usando css, pero no quiero cambiar el fondo de un encabezado de tabla. Sin embargo, de forma predeterminada, un TH se envuelve en un TR, por lo que la regla TR se envía a mi TH.

Aquí hay una jsFiddle probar con, si ayuda: http://jsfiddle.net/jomanlk/Bcayc/

Answer 1

Puede añadir <thead> y <tbody> a diferenciar sus filas de encabezado de las filas de datos. De esta manera se puede orientar únicamente los deseados:

table tbody td:hover{ 
    background: #f00; 
} 

table tbody tr:hover{ 
    background: #00f; 
}​ 

DEMO

Junto con el siguiente marcado:

<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>​ 

Answer 2

Parece que el mejor método se ha publicado el uso de la culata en T y tbody.

Alternativamente, como concepto, se podría añadir una clase a la cabecera-tr, y definir un color de fondo estática, lugar después de la condición de vuelo estacionario en el Css

table td:hover{ 
    background: #f00; 
} 

table td:hover{ 
    background: #00f; 
} 

table .nohover:hover{ 
    background: #fff; 
} 

<table> 
    <tr class="nohover"> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
     <td>Col 4</td> 
    </tr> 
     <tr> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
     <td>Col 4</td> 
    </tr> 
</table>​ 

Answer 3

O cada segunda fila + hover

tbody tr:nth-child(2n), tbody tr:hover{ 
    background-color: #e3e3e3; 
}