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

在CSS中可使用:nth-child()选择器来实现表格隔行变色效果。:nth-child()选择器用于根据元素在一组兄弟中的位置来匹配元素;它匹配第n个子元素。

语法:

:nth-child(arg) {
    // CSS样式
}

其中arg是表示匹配元素的模式的参数;它可以是一个数字(number)、一个关键字(odd 或 even)或一个函数式。想要隔行设置表格的行颜色需要使用到关键字(odd 或 even),下面就来介绍一下:

● odd:表示位置为奇数的元素,即1,3,5等。

● even:表示位置为偶数的元素,即2,4,6等。

示例1:为在表中交替的偶数行设置颜色

<!DOCTYPE html> 
<html> 
<head> 
   	<meta charset="UTF-8">
    <style> 
        table { 
            border-collapse: collapse; 
            width: 100%; 
        } 
          
        th, td { 
            text-align: center; 
            padding: 8px; 
        } 
          
        tr:nth-child(even) { 
            background-color: #f1b3b3;
        } 
    </style>
</head> 

<body> 
    <table> 
        <tr> 
            <th>1</th> 
            <th>2</th>
            <th>3</th> 
        </tr> 
          
        <tr> 
            <td>1-1</td> 
            <td>1-2</td> 
            <td>1-3</td> 
        </tr> 
          
        <tr> 
            <td>2-1</td> 
            <td>2-2</td> 
            <td>2-3</td> 
        </tr> 
          
        <tr> 
            <td>3-1</td> 
            <td>3-2</td> 
            <td>3-3</td> 
        </tr> 
          
        <tr> 
            <td>4-1</td> 
            <td>4-2</td> 
            <td>4-3</td> 
        </tr>  
          
        <tr> 
            <td>5-1</td> 
            <td>5-2</td> 
            <td>5-3</td> 
        </tr> 
    </table> 
</body> 
  
</html>

效果图:

9e5114a1bf6fe5bd2a7e4312433beeb.png

示例2:为在表中交替的奇数行设置颜色

<!DOCTYPE html> 
<html> 
<head> 
   	<meta charset="UTF-8">
    <style> 
        table { 
            border-collapse: collapse; 
            width: 100%; 
        } 
          
        th, td { 
            text-align: center; 
            padding: 8px; 
        } 
          
        tr:nth-child(odd) { 
            background-color: #90d0ee; 
        } 
    </style>
</head> 

<body> 
    <table> 
        <tr> 
            <th>1</th> 
            <th>2</th>
            <th>3</th> 
        </tr> 
          
        <tr> 
            <td>1-1</td> 
            <td>1-2</td> 
            <td>1-3</td> 
        </tr> 
          
        <tr> 
            <td>2-1</td> 
            <td>2-2</td> 
            <td>2-3</td> 
        </tr> 
          
        <tr> 
            <td>3-1</td> 
            <td>3-2</td> 
            <td>3-3</td> 
        </tr> 
          
        <tr> 
            <td>4-1</td> 
            <td>4-2</td> 
            <td>4-3</td> 
        </tr>  
          
        <tr> 
            <td>5-1</td> 
            <td>5-2</td> 
            <td>5-3</td> 
        </tr> 
    </table> 
</body> 
  
</html>

效果图:

e11e851534a2726243542187ca838bb.png

以上就是如何使用CSS设置表格隔行变色?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏