时间戳

首页 > 解决方案 > 使用 CSS 从表格的第二行替换行颜色

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

问题描述

我有一张如下表。我需要从第二行开始应用替代颜色。当我使用 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>

标签： htmlcsshtml-tablecss-selectors

解决方案

You can use :nth-child() selector. Also, if you are using <th> elements, you can put them in a <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>

If you don't want to alter your markup, you can start from the 3rd index.

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>

推荐阅读