如何使用CSS设置表格奇偶行的不同背景色？

翻滚的胖子
2023-08-01 10:28:21
前端技术
CSS JavaScript

CSS设置表格奇偶行的不同背景色

表格是网页中常用的元素之一，通过设置表格奇偶行的不同背景色可以增强表格的可读性和美观度。下面我们将使用CSS来实现这一效果。

步骤一：为奇偶行设置不同的类名

首先，我们需要为表格的奇偶行分别设置不同的类名。我们可以使用CSS中的:nth-child()伪类选择器来选择奇偶行。

/* 奇数行的样式 */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 偶数行的样式 */
tr:nth-child(even) {
  background-color: #ffffff;
}

在上面的代码中，我们使用:nth-child(odd)选择器选中奇数行，并设置其背景色为#f2f2f2；使用:nth-child(even)选择器选中偶数行，并设置其背景色为#ffffff。

步骤二：应用类名到表格

接下来，我们需要将上面定义的类名应用到表格中。我们可以给表格的<tbody>元素添加一个类名，然后通过CSS选择器来选择表格中的奇偶行。

<table class="striped-table">
  <tbody class="table-body">
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
    <tr>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

在上面的代码中，我们给<tbody>元素添加了一个类名table-body，并给<table>元素添加了一个类名striped-table。

步骤三：添加CSS样式

最后，我们将上面定义的CSS样式应用到表格中。我们可以通过选择器选择表格中的奇偶行，并将奇偶行的类名应用到对应行上。

.striped-table .table-body tr:nth-child(odd) {
  background-color: #f2f2f2;
}

.striped-table .table-body tr:nth-child(even) {
  background-color: #ffffff;
}

在上面的代码中，我们使用选择器.striped-table .table-body tr:nth-child(odd)选择奇数行，并应用奇数行的类名；使用选择器.striped-table .table-body tr:nth-child(even)选择偶数行，并应用偶数行的类名。

示例代码

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 奇数行的样式 */
    .striped-table .table-body tr:nth-child(odd) {
      background-color: #f2f2f2;
    }

    /* 偶数行的样式 */
    .striped-table .table-body tr:nth-child(even) {
      background-color: #ffffff;
    }
  </style>
</head>
<body>
  <table class="striped-table">
    <tbody class="table-body">
      <tr>
        <td>内容1</td>
        <td>内容2</td>
      </tr>
      <tr>
        <td>内容3</td>
        <td>内容4</td>
      </tr>
      <tr>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

通过以上三个步骤，我们可以轻松地使用CSS设置表格的奇偶行具有不同的背景色。希望本文对你有所帮助！

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com