如何遮蔽跨越多行的其他 table 行？

Question

我正在尝试对跨越其旁边多行的每一行进行阴影处理，同时对这些行（不是每一行）进行阴影处理。如果可能的话，我将如何仅使用 CSS 来做到这一点？

----------------------------------------------
| HEADER | HEADER | HEADER | HEADER | HEADER | 
----------------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
| COLUMN |------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
----------------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
|        |------------------------------------
| COLUMN | COLUMN | COLUMN | COLUMN | COLUMN | 
| shaded |------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
----------------------------------------------
| COLUMN | COLUMN | COLUMN | COLUMN | COLUMN | 
----------------------------------------------
|        | COLUMN | COLUMN | COLUMN | COLUMN | 
| COLUMN |------------------------------------
| shaded | COLUMN | COLUMN | COLUMN | COLUMN | 
----------------------------------------------

如果不清楚，带阴影的 rowspan 旁边的行也应该一起加阴影。

Answer 1

这是您要找的吗？ http://jsfiddle.net/swm53ran/33/

根据偏好使用第 n 个子节点（偶数）或奇数并设置背景颜色。

table tr:nth-child(even) {
    background-color:lightgray;
}

<table class="table table-bordered">
    <tr>
        <td>stuff here</td>
        <td>stuff here</td>
        <td>stuff here</td>
    </tr>
    <tr>
        <td>stuff here</td>
        <td>stuff here</td>
        <td>stuff here</td>
    </tr>
</table>

Answer 2

由于您希望阴影基于具有 rowspan 的单元格，因此 tr 上的 nth-child 在这种情况下不起作用。

相反，您可以将行的每个部分放在一个 tbody 元素中，然后对该标签应用 nth-child 样式：

table {
  border-collapse: collapse;
}

td {
  padding: 0.3em;
  border: 1px solid #ccc;
}

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

tbody {
  border: 2px solid green;
}

<table>
  <tr><td> HEADER <td> HEADER <td> HEADER <td> HEADER <td> HEADER </tr>
  <tbody>
    <tr><td rowspan="2">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
    <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  </tbody>

  <tbody>
    <tr><td rowspan="3">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
    <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
    <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  </tbody>

  <tbody>
    <tr><td rowspan="1">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  </tbody>

  <tbody>
    <tr><td rowspan="2">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
    <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  </tbody>
</table>

另一种方法是使用 jQuery 为单元格添加阴影。

下面的代码查看每行的第一个 td。如果它的 offsetLeft 为 0，则它是其列中的第一个单元格，这就是我们要基于的阴影。

如果它是奇数编号的单元格，我们将其父级 tr 及其父级 tr 的下一个 x 兄弟姐妹着色，其中 x 基于单元格跨越的行数：

var odd= true;
$('tr td:first-child').each(function() {
  if(!this.offsetLeft) {
    if(odd) {
      $(this).parent('tr').nextAll().addBack().slice(0, this.rowSpan).css('background','yellow');
    }
    odd= !odd;
  }    
});

var odd= true;
$('tr td:first-child').each(function() {
  if(!this.offsetLeft) {
    if(odd) {
      $(this).parent('tr').nextAll().addBack().slice(0, this.rowSpan).css('background','yellow');
    }
    odd= !odd;
  }    
});

table {
  border-collapse: collapse;
}

td {
  padding: 0.3em;
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td> HEADER <td> HEADER <td> HEADER <td> HEADER <td> HEADER 
  <tr><td rowspan="2">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 

  <tr><td rowspan="3">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 

  <tr><td rowspan="1">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 

  <tr><td rowspan="2">COLUMN <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
  <tr>                       <td> COLUMN <td> COLUMN <td> COLUMN <td> COLUMN 
</table>

如何遮蔽跨越多行的其他 table 行？

How to shade every other table row that spans across multiple rows?

html

css

tabular