HTML中的条形表

时间：2018-12-12 14:18:08

标签： html css

我的桌子是这样的。如您所见，我尝试对它进行条纹处理：

   tr:nth-child(even)  {
   background-color:#AD0D10;
}
<table>
 <tr>
    <th >xxx</th>
    <th >xxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxx</th>
    <th>xxxxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxxxxxx</th>
    <th>xxxxxxxxxxxxxx</th>
  </tr>
<tr>
    <td rowspan="2">1</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>888888888</td>
    <td>8888888</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
  </tr>
  <tr>
    <td>88888</td>
    <td colspan="3">888888</td>
    <td>8888</td>
    <td colspan="4">8888888</td>
  </tr>
  <tr>
    <td rowspan="2">2</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>888888888</td>
    <td>8888888</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
  </tr>
  <tr>
    <td>88888</td>
    <td colspan="3">888888</td>
    <td>8888</td>
    <td colspan="4">8888888</td>
  </tr>
 
</table>

除标题外，在表中，每一行还包含两个。如果我将该行作为主行。我要对主要行进行条纹处理。实际上，我希望两者都在一起。 我使用tr：nth-​​child（even）> tr但它仍然无法正常工作。

3 个答案:

答案 0 :(得分：3)

首先要认识的是您的CSS：

`tr:nth-child(even)`

正在按照您要求的去做。每行中都有第一个单元格跨越多行这一事实并不意味着<tr>本身会变大，而只是意味着<td>现在占据了每一行的空间。

因此，要解决此问题，我们需要设置每对<tr>元素的替代样式；使用两个:nth-child()选择器即可完成：

// selecting every fourth <tr> element within the <tbody> element:
tbody tr:nth-child(4n),
// selecting the <tr> element that precedes every fourth <tr>
// element within the <tbody>:
tbody tr:nth-child(4n-1) {
  background-color: #f00;
}


tbody tr:nth-child(4n),
tbody tr:nth-child(4n-1) {
  background-color: #f00;
}
<table>
  <thead>
    <tr>
      <th>xxx</th>
      <th>xxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxx</th>
      <th>xxxxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxxxxxx</th>
      <th>xxxxxxxxxxxxxx</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
    </tr>
    <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
    </tr>
  </tbody>
</table>

JS Fiddle demo。

注意：

  • 我已经通过复制和粘贴前两个“行组”来扩展<table>，以证明该模式超出了简单的演示，并且

  • 我还将包含<tr>个元素的<th>行包装在其自己的<thead>元素中，原因有两个：

    1. 因为从语义上讲，表的列标题应该在哪里，并且
    2. 为防止tr:nth-child()选择器选择包含那些元素的<tr>，需要将表体内的<tr>元素与包含{{ 1}}元素；因为需要用<tr>进行分组，所以也必须将<th>用作标题。

关于您的术语，没有“主要”或“次要”行；只有行（尽管行<tbody>跨元素）。

参考文献：

答案 1 :(得分：0)

不清楚您想要什么，但是您可以尝试以下示例。希望对您有所帮助。

tr:nth-child(even) + tr {
   background-color:#AD0D10;
}
<table>
  <tr>
      <th >xxx</th>
      <th >xxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxx</th>
      <th>xxxxxxxx</th>
      <th>xxxxxxx</th>
      <th>xxxxxxxxxx</th>
      <th>xxxxxxxxxxxxxx</th>
    </tr>
  <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
  </tr>
  <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
  </tr>
  <tr>
      <td rowspan="2"></td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>8888888</td>
      <td>888888888</td>
      <td>8888888</td>
      <td>88888888</td>
      <td>8888888</td>
      <td>8888888</td>
  </tr>
  <tr>
      <td>88888</td>
      <td colspan="3">888888</td>
      <td>8888</td>
      <td colspan="4">8888888</td>
  </tr>
</table>

答案 2 :(得分：0)

您的colspan列是否始终位于第一位置？

如果是，请参见下面的示例。

如果不去Irina回答：）

tr:nth-child(even) td:not(:first-child)  {
   background-color:#AD0D10;
}
<table>
 <tr>
    <th >xxx</th>
    <th >xxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxx</th>
    <th>xxxxxxxx</th>
    <th>xxxxxxx</th>
    <th>xxxxxxxxxx</th>
    <th>xxxxxxxxxxxxxx</th>
  </tr>
<tr>
    <td rowspan="2"></td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>888888888</td>
    <td>8888888</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
  </tr>
  <tr>
    <td>88888</td>
    <td colspan="3">888888</td>
    <td>8888</td>
    <td colspan="4">8888888</td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>8888888</td>
    <td>888888888</td>
    <td>8888888</td>
    <td>88888888</td>
    <td>8888888</td>
    <td>8888888</td>
  </tr>
  <tr>
    <td>88888</td>
    <td colspan="3">888888</td>
    <td>8888</td>
    <td colspan="4">8888888</td>
  </tr>
 
</table>

相关问题
最新问题