html table奇偶行颜色设置

- 日理万妓 2022-05-14 10:57 526阅读 0赞

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

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

效果:

![466768-20180106113325049-378382296.png][]

<!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>

[466768-20180106113325049-378382296.png]: /images/20220514/90ab58d680f44a12847979c2e9112175.png

发表评论取消回复

表情：

评论列表（有 0 条评论，526人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery怎么设置表格奇偶行不同的颜色？

在[jQuery][]中使用“$("tr:odd").css("background-color","颜色")”与“$("\tr:even").css("background-

Love The Way You Lie/ 2023年10月03日 19:22/ 0 赞/ 38 阅读

相关 JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色

JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色 > css 奇偶行变色是通过 `li:nth(odd)` 和 `li:nth(even)` 实现的，鼠标滑上改变颜色，

末蓝、/ 2022年12月20日 15:56/ 0 赞/ 395 阅读

相关奇偶校验

一、理解在一个字节后加一位，代表一个字节中的1的个数的奇偶，由此来校验字节内容。二、百度百科 > 奇偶校验(Parity Check)是一种校验代码传输正确性

怼烎@/ 2022年11月15日 03:57/ 0 赞/ 291 阅读

相关奇偶剪枝

明天再详细补充。。。百度百科粘过来的 ![20130522221549745][] 奇偶剪枝是数据结构的搜索中，剪枝的一种特殊小技巧。描述现假设起点为(sx,

以你之姓@/ 2022年06月14日 23:11/ 0 赞/ 268 阅读

相关如何用jquery控制表格奇偶行及活动行颜色

先定义好表格的奇偶行样式，如下代码： body \{ font-size:12px; \} th \{ color: \FFFFFF;

爱被打了一巴掌/ 2022年06月10日 04:40/ 0 赞/ 213 阅读

相关 js设置表格奇偶行的不同颜色，实现斑马效果

让表格里的行更具有可读性的常用技巧是交替改变它们的样式背景，从而形成斑马线效果，使相邻的两行泾渭分明。通过分别设置奇数行和偶数行样式的办法可实现这种效果。如果浏览器支持CSS3

怼烎@/ 2022年05月15日 15:17/ 0 赞/ 762 阅读

相关 html table奇偶行颜色设置

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。下面的例子, 设置表格的奇偶行背景颜色不同；单独设置表格

- 日理万妓/ 2022年05月14日 10:57/ 0 赞/ 527 阅读

相关 jquery css 设置table的奇偶行背景色

<style> .even{background:FFF38F;} .odd{background:FFFFEE;} .selected{bac

Myth丶恋晨/ 2022年05月13日 05:20/ 0 赞/ 233 阅读

相关奇偶校验

奇偶校验有两种校验规则：奇校验：使完整编码（有效位和校验位）中的"1"的个数为奇数个；偶校验：使完整编码（有效位和校验位）中的"1"的个数为偶数个直接举例

青旅半醒/ 2021年12月16日 17:55/ 0 赞/ 364 阅读

相关纯css table奇偶行背景不同

css代码 <style type="text/css"> .table-striped tbody tr:nth-ch

àì夳堔傛蜴生んèń/ 2021年06月24日 13:58/ 0 赞/ 394 阅读