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

如果它不清楚，阴影行数旁边的行也应该一起阴影。

Answer 1

由于您希望着色基于rowspan的单元格，nth-child上的tr在这种情况下无效。

相反，您可以将每个行部分放在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>

Answer 2

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

根据喜好使用nth-child（偶数）或odd，并设置背景颜色。

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>

如何遮蔽跨越多行的每个其他表行？

2 个答案: