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:

Answer 1

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

  

    

      

      
a
      

      

    
    

      
b
      

      

    
    

      
c
      

      

    
  

  

    

      

      
a
      

      

    
    

      
b
      

      

    
    

      
c
      

      

    
  

  

    

      

      
a
      

      

    
    

      
b
      

      

    
    

      
c