How to shade every other table row that spans across multiple rows?

Question

I am trying to shade every other row that spans across multiple rows next to it while also shading those rows (not each). How would I do this with just CSS if it is possibly at all?

----------------------------------------------
| HEADER | HEADER | HEADER | HEADER | HEADER | 
----------------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
| COLUMN |------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
----------------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
|        |------------------------------------
| COLUMN | COLUMN | COLUMN | COLUMN | COLUMN | 
| shaded |------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
----------------------------------------------
| COLUMN | COLUMN | COLUMN | COLUMN | COLUMN | 
----------------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
| COLUMN |------------------------------------
| shaded | COLUMN | COLUMN | COLUMN | COLUMN | 
----------------------------------------------

In case it wasn't clear, the rows next to shaded rowspan should be shaded all together as well.

Rick Hitchcock Rick Hitchcock · Accepted Answer · 2015-01-07T20:05:38

Since you want the shading to be based on cells with a rowspan, nth-child on tr won't work in this situation.

Instead, you can place each section of rows inside a tbody element, and apply nth-child styling to that tag:

table {
  border-collapse: collapse;
}

td {
  padding: 0.3em;
  border: 1px solid #ccc;
}

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

tbody {
  border: 2px solid green;
}

<table>
  <tr><td> HEADER <td> HEADER <td> HEADER <td> HEADER <td> HEADER </tr>
  <tbody>
    <tr><td rowspan="2">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
    <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  </tbody>

  <tbody>
    <tr><td rowspan="3">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
    <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
    <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  </tbody>

  <tbody>
    <tr><td rowspan="1">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  </tbody>

  <tbody>
    <tr><td rowspan="2">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
    <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  </tbody>
</table>

The code below looks at the first td of each row. If its offsetLeft is 0, it's the first cell in its column, and that's what we want to base the shading on.

If it's an odd-numbered cell, we shade its parent tr and its parent tr's next x siblings, where x is based on the number of rows that the cell spans:

var odd= true;
$('tr td:first-child').each(function() {
  if(!this.offsetLeft) {
    if(odd) {
      $(this).parent('tr').nextAll().addBack().slice(0, this.rowSpan).css('background','yellow');
    }
    odd= !odd;
  }    
});

var odd= true;
$('tr td:first-child').each(function() {
  if(!this.offsetLeft) {
    if(odd) {
      $(this).parent('tr').nextAll().addBack().slice(0, this.rowSpan).css('background','yellow');
    }
    odd= !odd;
  }    
});

table {
  border-collapse: collapse;
}

td {
  padding: 0.3em;
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td> HEADER <td> HEADER <td> HEADER <td> HEADER <td> HEADER 
  <tr><td rowspan="2">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 

  <tr><td rowspan="3">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 

  <tr><td rowspan="1">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 

  <tr><td rowspan="2">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
</table>

How to shade every other table row that spans across multiple rows?

2 Answers