css - imagenes - Tabla con Rowspan Hover y efecto Zebra

tablas en html5

Question

Intento crear una tabla que tenga un efecto rowspan, zebra y resalte la fila al pasar el mouse. De alguna manera lo hice funcionar, pero no del todo.

Debería ser así: http://codepen.io/chriscoyier/pen/wLGDz más un efecto de cebra en las filas. Lamentablemente, un efecto de cebra que utiliza jQuery o CSS no funciona para mí, ya que las líneas no cambiarán con el vuelo estacionario si lo hago.

¿Alguna sugerencia?

Answer 1

¿Algo como esto?

http://codepen.io/anon/pen/gcBlH

Básicamente, haciendo:

$("tr :even").css(''background'', ''#ccc'')

y

.hover {
background: red !important;
}

Answer 2

Algo como:

// stripe
tr:nth-child(even) {
background-color: #ccc;
}
// hover
tr:hover {
background-color: #c00;
}

Deberia trabajar. Publica tu código.

Answer 3

Este es un trabajo para tbody . Múltiples elementos tbody están permitidos en una tabla al menos tan atrás como HTML4, y están diseñados para agrupar filas relacionadas entre sí. De esta manera, no necesita JavaScript en absoluto.

http://codepen.io/cimmanon/pen/KqoCs

<table>
<tbody>
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

El CSS:

body {
padding: 50px;
}
table {
width: 100%;
border-collapse: collapse;
}
td, th {
padding: 20px;
border: 1px solid black;
}
tbody:nth-child(odd) {
background: #CCC;
}
tbody:hover td[rowspan], tr:hover td {
background: red;
}