CODEWITHSUNDEEP
htmlcsscss-tables
user4143172
user4143172

Reputation:

How do you zebra striping a rowspan table?

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:

enter image description here

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

https://jsfiddle.net/gtL0tL6f/

Upvotes: 11

Views: 7489

Answers (4)

葉莉羚
葉莉羚

Reputation: 11

Try to get the same effect by using jquery.

var i=0;
var cols=$("table").find("tr:first").children().length;
if($("tr:first").find("[colspan]").attr("colspan")!=null){
      cols +=(parseInt($("tr:first").find("[colspan]").attr("colspan"))-1);
}
$("tr").each(function(index){
  var child=$(this).children().length;
  if($(this).find("[colspan]").attr("colspan")!=null){
      child +=(parseInt($(this).find("[colspan]").attr("colspan"))-1);
  }
  if(child>(cols-1)){
    if(i%2==0) $(this).addClass("mydark");
    i++;
  }else{
    $(this).addClass($(this).prev().attr("class"));
  }
});
.mydark{
  background-color: lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 1

Henrique
Henrique

Reputation: 610

You could build your table with many like:

<table>
  <tbody>
    <tr>
      <td rowspan=2>row a</td>
      <td>row b</td>
      <td>row c</td>
    <tr>
    <tr>
      <td>row b</td>
      <td>row c</td>
    <tr>
  <tbody>
  <tbody>
    <tr>
      <td rowspan=2>row b</td>
      <td>row a</td>
      <td>row b</td>
    <tr>
    <tr>
      <td>row c</td>
      <td>row d</td>
    <tr>
  <tbody>
</table>

And your css could be

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

just like described in this snipepet: https://codepen.io/cimmanon/pen/KqoCs

Upvotes: 19

spencer.sm
spencer.sm

Reputation: 20534

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/

Upvotes: 1

yaakov
yaakov

Reputation: 4665

I've changed the background in this fiddle to red to accentuate the difference... https://jsfiddle.net/crx8Ldno/

tr:nth-of-type(odd) > td,
td[rowspan] {  
  background: #f00;
}

Upvotes: 1

Related Questions