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; 
}