你如何斑马条纹 rowspan table？

Question

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

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

https://jsfiddle.net/gtL0tL6f/

Answer 1

我已将此 fiddle 中的背景更改为红色以突出差异... https://jsfiddle.net/crx8Ldno/

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

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

您可以与许多人建立 table 喜欢：

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

就像这个片段中描述的那样： https://codepen.io/cimmanon/pen/KqoCs

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>

你如何斑马条纹 rowspan table？

How do you zebra striping a rowspan table?

html

css

css-tables