如何使用 CSS 设置表格的隔行颜色?

cssweb developmentfront end technology更新于 2024/3/22 8:12:17

表格用于以结构化和有组织的格式呈现数据。它是网页设计的重要组成部分。隔行颜色用于增强表格的可读性和美观性。隔行颜色是一种设计技巧，表格中每隔一行的背景颜色与相邻行不同。这种技巧有助于读者区分行，并改善表格的整体外观。

隔行颜色的基本 CSS 语法

CSS 中的 :nth-child() 伪类选择器用于设置表格的隔行颜色。nth-child 选择器允许根据元素在一组兄弟元素中的位置来选择元素。设置隔行颜色的基本语法 -

tr:nth-child(even) {
    background-color: #f2f2f2;
}

此处，tr:nth-child(even) 选择器选择每个偶数 tr(表格行)元素，并应用背景色 #f2f2f2。

步骤

按照以下步骤使用 CSS 设置替代表格行颜色 -

步骤 1:创建表格

要设置替代表格行颜色，我们需要使用 HTML 创建一个表格。一个基本的表格结构由 <table> 元素、<thead>、<tbody> 以及 <tr> 和 <td> 元素组成。例如 -

示例

<table>
   <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
         <td>Row 1, Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
         <tr>
         <td>Row 3, Column 1</td>
         <td>Row 3, Column 2</td>
         <td>Row 3, Column 3</td>
      </tr>
   </tbody>
</table>

此处，我们创建了一个表格，它包含三列三行(包括标题行)。

步骤 2:添加 CSS 样式

下一步是添加 CSS 样式来设置隔行颜色。在 CSS 中，使用 nth-child 伪类选择器设置隔行颜色。例如:-

tr:nth-child(odd) {
    background-color: lightblue;
}
tr:nth-child(even) {
    background-color: lightgreen;
}

在上面的 CSS 代码中，我们将 tr:nth-child(odd) 选择器数量为奇数的行的背景颜色设置为浅蓝色，而 tr:nth-child(even) 选择器将偶数行的背景颜色设置为浅绿色。

步骤 3:将样式应用于表格

最后一步是将 CSS 样式应用于表格。例如 -

示例

<html>
<head>
   <style>
      tr:nth-child(odd) { background-color: lightblue; }
      tr:nth-child(even) {background-color: lightgreen;}
   </style>
</head>
<body>
   <h3>Set alternate table row color using CSS</h3>	
   <table>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 3</td>
         </tr>
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
         </tr>
         <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
            <td>Row 3, Column 3</td>
         </tr>
         <tr>
            <td>Row 4, Column 1</td>
            <td>Row 4, Column 2</td>
            <td>Row 4, Column 3</td>
         </tr>
      </tbody>
   </table>
</body>
</html>