你怎么斑马条纹行台？

Question

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

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

https://jsfiddle.net/gtL0tL6f/

Answer 1

我无法找到纯粹的CSS解决方案......但是我能够使用JavaScript获得相同的效果。

＆＃13;

＆＃13;

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

＆＃13;

.dark{
  background-color: lightgray;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此处：https://jsfiddle.net/dotspencer/gtL0tL6f/15/

Answer 2

你可以用很多人建立你的桌子 像：

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