html table奇偶行颜色设置

最新推荐文章于 2024-07-12 18:29:20 发布

小菜菜1223

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量3.4k

点赞数

分类专栏： html

html 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

下面的例子, 设置表格的奇偶行背景颜色不同；单独设置表格的第1列背景颜色不同。

效果:

<!DOCTYPE html>
<html>
   <head>
        <style type="text/css"> 
            table{
                height: 200px;
                width:400px;
                border:2px solid  green;
            }
            
            td{
                border:1px solid;
            }
            
            tr:nth-child(2n){
                background:#00CCCC;
            }
            
            tr td:nth-child(1){
                background:#FFCCCC;
            }
        </style>  
    </head> 
    <body>
        <table>
            <tr>
                <td>1</td> <td>2</td> <td>3</td>
            </tr>
            <tr>
                <td>1</td> <td>2</td> <td>3</td>
            </tr>
            <tr>
                <td>1</td> <td>2</td> <td>3</td>
            </tr>
            <tr>
                <td>1</td> <td>2</td> <td>3</td>
            </tr>
        </table>
    </body>
</html>

小菜菜1223

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html table奇偶行颜色设置

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。下面的例子, 设置表格的奇偶行背景颜色不同；单独设置表格的第1列背景颜色不同。效果:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; ...
复制链接

扫一扫

专栏目录