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?

You could use Bootstrap as it all comes built in with it: http://twitter.github.com/bootstrap/base-css.html#tables — Billy Moat, Mar 17 '13 at 18:57

score 52 · Answer 1 · edited Aug 12 '20 at 19:29

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.

body {
  padding: 1em;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  padding: .25em;
  border: 1px solid black;
}

tbody:nth-child(odd) {
  background: #CCC;
}

tbody:hover td[rowspan],
tr:hover td {
  background: red;
}

<table>
  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>a</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>b</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>c</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>a</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>b</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>c</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>a</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>b</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>c</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

tksss 'tbody:hover td[rowspan], tr:hover td { background: red; }' — Fábio Zangirolami, Feb 26 '16 at 22:12
If you are hovering `b` or `c` row and move mouse to first `td`, it automatically hovers `a` row. Is it possible to keep it on `b`/`c` in these situations? — nikname, Mar 08 '22 at 15:52

score -2 · Answer 2 · answered Mar 17 '13 at 18:59

-2

Something like:

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

should work. Post your code up.

answered Mar 17 '13 at 18:59

Bob

177
1
3
11

Table with Rowspan Hover and Zebra effect

2 Answers2

Linked