js学习-表格隔行变色效果

最新推荐文章于 2024-08-25 18:26:48 发布

YuKing_HONG

最新推荐文章于 2024-08-25 18:26:48 发布

阅读量860

点赞数

分类专栏： js 文章标签： js html jquery css3 css

本文链接：https://blog.csdn.net/YuKing_HONG/article/details/116758123

版权

本文介绍如何使用JavaScript结合CSS实现HTML表格的隔行变色效果，通过JS动态为表格行添加样式，达到视觉上的区分效果。

摘要由CSDN通过智能技术生成

效果如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table td,table th{
            width: 170px;
            height: 40px;
            text-align: center;
            border-bottom: 1px solid rgb(195, 195, 195);
        
        }

        thead{
            color:  rgb(6, 6, 161);
            background: rgb(220, 220, 255);
        }

       td:nth-child(1), td:nth-child(2){
            color: rgb(6, 6, 161);
        }

        td:nth-child(6){
            color:red;
        }

最低0.47元/天解锁文章

YuKing_HONG

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js学习-表格隔行变色效果

效果如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t..
复制链接

扫一扫

专栏目录