How do you zebra striping a rowspan table?

Question

My table has rowspan cells, how can I apply striped background, so that the rows with rowspan cell are regarded as one row, like this:

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

https://jsfiddle.net/gtL0tL6f/

Answer 1

I couldn't find a pure CSS solution... But I was able to get the same effect using JavaScript.

var tds = document.querySelectorAll("td, th");
var groups = [];

for(var i = 0; i < tds.length; i++){
	if(tds[i].getAttribute('rowspan') != null){
  	var rspan = tds[i];
  	groups.push({
    	parent: rspan.parentNode,
      height: rspan.getAttribute('rowspan')
    });
  }
}

var count = 0;
var rows = document.querySelectorAll('tr');
var dark = true;

debugger;
for(var i = 0; i < rows.length; i++){
	var row = rows[i];
  var index = groupIndex(row);
  if(index != null && dark){
  	var group = groups[index];
    var height = parseInt(group.height);
    for(var j = i; j < i + height; j++){
    	rows[j].classList.add('dark');
    }
    i += height - 1;
    dark = !dark;
    continue;
  }
  if(dark){
  	rows[i].classList.add('dark');
  }
  dark = !dark;
}

function groupIndex(element){
	for(var i = 0; i < groups.length; i++){
  	var group = groups[i].parent;
    if(group == element){
    	return i;
    }
  }
  return null;
}

.dark{
  background-color: lightgray;
}

<table width="200" border="1" id="myTable">
  <tr>
    <th rowspan="2" scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="3">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Also here: https://jsfiddle.net/dotspencer/gtL0tL6f/15/