使用 CSS 从表格的第二行替换行颜色

Posted 2023-03-06

【中文标题】使用 CSS 从表格的第二行替换行颜色

【英文标题】：Alternate row colours from 2nd row of the table using CSS

【发布时间】：2020-11-12 19:07:35

【问题描述】：

我有一张如下表。我需要从第二行开始应用替代颜色。当我使用 nth-child 选择器来区分奇数行和偶数行时，正在考虑不满足要求的第一行。

那么，我们如何编写一个忽略第一行并从第二行开始应用颜色的选择器，将第二行视为奇数行？

我知道我们可以将奇数行的颜色应用于偶数行，反之亦然，但是当我们查看代码时有些令人困惑的地方。所以，我正在寻找下面这个表结构的替代解决方案。我感谢您的帮助。谢谢。

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

【参考方案1】：

您可以使用:nth-child() selector。另外，如果您使用<th> 元素，您可以将它们放在<thead> 中。

tbody tr:nth-child(2n) 
  background: peachpuff;

<table>
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
    </tr>
    <tr>
      <td>51</td>
      <td>52</td>
    </tr>
    <tr>
      <td>61</td>
      <td>62</td>
    </tr>
  </tbody>
</table>

如果您不想更改标记，可以从第 3 个索引开始。

tr:nth-child(2n+3) 
  background: moccasin;

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
    </tr>
    <tr>
      <td>51</td>
      <td>52</td>
    </tr>
    <tr>
      <td>61</td>
      <td>62</td>
    </tr>
  </tbody>
</table>

【讨论】：

这与 2n 选择器相同，没有特定于我的场景。

【参考方案2】：

您可以使用nth-child() css 选择器来选择奇数和偶数。然后通过nth-child(2) 选择器跳过第二行。

tr:nth-child(even) background: #CCC
tr:nth-child(odd) background: green
tr:nth-child(1) 
background:none;

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

另一种实现方法是将<thead> 和<tbody> 分开。

tbody tr:nth-child(even) background: #CCC
tbody tr:nth-child(odd) background: green

<table>
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

【讨论】：

在我的场景中，我们无法将颜色应用到第一行，因为我们不确定代码中的某些位置是否已经应用了颜色。

col1 和 col2 没有颜色。你想要同样的权利吗？你想跳过第二个值 11 和 12 吗？为了区分，您可以添加一些边框或不添加。

我希望第 2、第 4、第 6、... 被视为奇数行，第 3、第 5、第 7、... 被视为偶数行，因为我们忽略了第 1 行。

你的第一行是标题？或具有值 11 和 12 的行？没有清除

不管是不是标题还是表格行。在这种情况下，它是标题行。无论哪种方式，我们都必须过滤掉第一行并从第二行开始计数作为第一行。

【参考方案3】：

这对你有用吗？分别定位第一行

tr:nth-child(even) background: #CCC
tr:nth-child(odd) background: #FFF
tr:first-child 
  background-color: yellow;

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

【讨论】：

在我的场景中，我们无法将颜色应用到第一行，因为我们不确定代码中的某些位置是否已经应用了颜色。

【参考方案4】：

您可以将nth-child() 选择器与not() 选择器结合使用。

tr:nth-child(2n + 1):not(:nth-child(1)) 
    background: red;

【讨论】：

这不仅会为第一行应用颜色，还会为第三行、第五行等应用颜色。但是，在我的情况下，第 2、第 4、第 6 等等应该被视为奇数行。

【参考方案5】：

 table > tbody tr:nth-child(2n+1) > td
    background-color: #eee;

table > tbody > tr:first-child > td
    background-color: #006c00;
           
table > tbody > tr:nth-child(2n + 2) > td
    background-color: #d8e4bc;

【讨论】：

在我的场景中，我们无法将颜色应用到第一行，因为我们不确定代码中的某些位置是否已经应用了颜色。

不会有 :) 试试看codepen.io/Codrey/pen/ZEQwZjN?editors=1100

2n+1 在我们查看代码时基本上是奇数行，但它被应用于偶数行（如果计数从实际的第二行开始，则为第二行）。所以，我不想在代码和视觉之间产生这种混淆。