Table avec Rowspan de pointage et de Zèbre effet

Je suis en train de créer une table qui a un rowspan, de zèbres, d'effet et met en évidence la ligne sur le vol stationnaire. J'ai eu de travail, mais pas tout à fait.

Il devrait ressembler à ceci: http://codepen.io/chriscoyier/pen/wLGDz plus d'un zèbre effet sur les lignes. Malheureusement, un zèbre effet à l'aide de jQuery ou CSS ne fonctionne pas pour moi que les lignes ne changent pas sur le vol stationnaire si je le fais.

Des suggestions?

Vous pouvez utiliser Bootstrap que tout se construit avec: twitter.github.com/bootstrap/base-css.html#tables

OriginalL'auteur rhslogic | 2013-03-17

  1. -2

    Quelque chose comme cela?

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

    Fondamentalement, en faisant: 

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

    et 

    .hover {
   background: red !important; 
}

    OriginalL'auteur MattDiamant

  2. 36

    C'est un travail pour tbody. Plusieurs tbody éléments sont admis dans un tableau au moins aussi loin que HTML4, et ils sont conçus pour le regroupement des lignes liées ensemble. De cette façon, vous n'avez pas besoin de JavaScript.

    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>

    Le 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; 
}
    Ce doit être la accepté de répondre. Fonctionne comme un charme.
    tksss 'tbody:hover td[rowspan], tr:hover td { background: red; }'

    OriginalL'auteur cimmanon

  3. 0

    Quelque chose comme:

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

    devrait fonctionner. Poster votre code.

    OriginalL'auteur Bob