你怎么斑马条纹行台？

Question

我的表有rowspan单元格，如何应用条纹背景，以便将具有rowspan单元格的行视为一行，如下所示：

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

https://jsfiddle.net/gtL0tL6f/

Answer 1

您可以使用以下许多方式构建表：

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

你的css可能是

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

就像在这个snipepet中描述的那样： https ：//codepen.io/cimmanon/pen/KqoCs

Answer 2

我找不到纯粹的CSS解决方案......但是我能够使用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> 

也在这里： https ： //jsfiddle.net/dotspencer/gtL0tL6f/15/

Answer 3

我把这个小提琴的背景改为红色，以突出差异...... https://jsfiddle.net/crx8Ldno/

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

Answer 4

尝试使用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>