CSS表格交替行颜色

在Web开发中，表格是很常见的元素，而交替行颜色让表格更易读。CSS提供了一种方便的方式来实现这个效果。

使用nth-child选择器

我们可以使用CSS的:nth-child()选择器来选择表格的每一行或每一列，并为其添加背景颜色。

选择行

我们可以使用tr:nth-child(even)选择偶数行和tr:nth-child(odd)选择奇数行。

/* 偶数行 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 奇数行 */
tr:nth-child(odd) {
  background-color: #fff;
}

选择列

我们可以使用td:nth-child(even)选择偶数列和td:nth-child(odd)选择奇数列。

/* 偶数列 */
td:nth-child(even) {
  background-color: #f2f2f2;
}

/* 奇数列 */
td:nth-child(odd) {
  background-color: #fff;
}

使用nth-of-type选择器

我们还可以使用:nth-of-type()选择器来选择表格的每一行或每一列，并为其添加背景颜色。

选择行

我们可以使用tr:nth-of-type(even)选择偶数行和tr:nth-of-type(odd)选择奇数行。

/* 偶数行 */
tr:nth-of-type(even) {
  background-color: #f2f2f2;
}

/* 奇数行 */
tr:nth-of-type(odd) {
  background-color: #fff;
}

选择列

我们可以使用td:nth-of-type(even)选择偶数列和td:nth-of-type(odd)选择奇数列。

/* 偶数列 */
td:nth-of-type(even) {
  background-color: #f2f2f2;
}

/* 奇数列 */
td:nth-of-type(odd) {
  background-color: #fff;
}

完整代码示例

下面是一个完整的示例，展示如何使用CSS表格交替行颜色。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Apple</td>
      <td>$1.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Banana</td>
      <td>$0.50</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Orange</td>
      <td>$0.75</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Pineapple</td>
      <td>$2.00</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Watermelon</td>
      <td>$5.00</td>
    </tr>
  </tbody>
</table>

<style>
  /* 偶数行 */
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  
  /* 奇数行 */
  tr:nth-child(odd) {
    background-color: #fff;
  }
  
  /* 偶数列 */
  td:nth-child(even) {
    background-color: #f2f2f2;
  }
  
  /* 奇数列 */
  td:nth-child(odd) {
    background-color: #fff;
  }
</style>

以上代码会为表格的偶数行和偶数列添加灰色背景。

总结

使用CSS表格交替行颜色可以使表格更易读，并且使用:nth-child()或:nth-of-type()选择器可以快速实现这一效果。