如何遮蔽跨多行的所有其他表格行？答案

【问题标题】：How to shade every other table row that spans across multiple rows?如何遮蔽跨多行的所有其他表格行？
【发布时间】：2018-11-01 16:11:25
【问题描述】：

我正在尝试对跨越其旁边多行的所有其他行进行着色，同时对这些行（不是每一行）进行着色。如果可能的话，我将如何仅使用 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 | 
----------------------------------------------

如果不清楚，阴影行跨旁边的行也应该一起被阴影化。

【问题讨论】：

你的代码和尝试是什么？
当你说阴影时，你真正的意思是什么？
可能重复stackoverflow.com/q/27528420/2887133

标签： html css tabular

【解决方案1】：

由于您希望阴影基于带有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>

【讨论】：

在您的第一个代码 sn-p 中，tbody:nth-child(odd) tr:first-child td:first-child { background-color: #def; } 之类的内容只会遮蔽第一行的第一列，这似乎是操作的意图。
那肯定只会对第一列进行着色，但我认为 OP 希望根据他的评论对其他单元格进行着色，“阴影行跨度旁边的行也应该一起着色。”跨度>
啊，对。看的是图片，不是文字。 ;-)
正是我想要的，现在我为没有想到这一点而感到羞愧......谢谢
还有其他标签可以代替tbody吗？ tbody 不支持一些 CSS 属性，比如边框。

【解决方案2】：

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

使用 nth-child（偶数）或奇数，具体取决于偏好并设置背景颜色。

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>

【讨论】：