Table with Rowspan Hover and Zebra effect

Question

I am trying to create a table that has a rowspan, zebra effect and highlights the row on hover. I kind of got it working but not quite.

It should be like this: http://codepen.io/chriscoyier/pen/wLGDz plus a zebra effect on the rows. Unfortunately a zebra effect using jQuery or CSS does not work for me as the lines won't change on hover if I do that.

Any suggestions?

Answer 1

Something like this?

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

Basically, doing:

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

and

.hover {
   background: red !important; 
}

Answer 2

This is a job for tbody. Multiple tbody elements are allowed in a table at least as far back as HTML4, and they're designed for grouping related rows together. This way, you don't need JavaScript at all.

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>

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

Answer 3

Something like:

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

should work. Post your code up.