html table奇偶行颜色设置 (CSS选择器)

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

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

 1 <!DOCTYPE html>
 2 <html>
 3    <head>
 4         <style type="text/css">
 5             table{ 6                 height: 200px;
 7                 width:400px;
 8                 border:2px solid  green;
 9             }
10
11             td{12                 border:1px solid;
13             }
14
15             tr:nth-child(2n){16                 background:#00CCCC;
17             }
18
19             tr td:nth-child(1){20                 background:#FFCCCC;
21             }
22         </style>
23     </head>
24     <body>
25         <table>
26             <tr>
27                 <td>1</td> <td>2</td> <td>3</td>
28             </tr>
29             <tr>
30                 <td>1</td> <td>2</td> <td>3</td>
31             </tr>
32             <tr>
33                 <td>1</td> <td>2</td> <td>3</td>
34             </tr>
35             <tr>
36                 <td>1</td> <td>2</td> <td>3</td>
37             </tr>
38         </table>
39     </body>
40 </html>

效果:

可以参考:

http://www.w3school.com.cn/cssref/selector_nth-child.asp

html table奇偶行颜色设置 (CSS选择器)相关推荐

javafx-TableView 行颜色设置
#tableView_memory .table-row-cell:even {-fx-background: #ff7863; }#tableView_memory .table-row-cell: ...
table中嵌套table，如何用jquery来控制奇偶行颜色
总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...
html奇偶行颜色,jquery实现奇偶行不同颜色的方法
jquery实现奇偶行不同颜色的方法发布时间:2020-12-28 09:12:07 来源:亿速云阅读:74 作者:小新这篇文章主要介绍了jquery实现奇偶行不同颜色的方法,具有一定借鉴价值, ...
html中怎么设置渐变颜色设置,css中渐变色怎么设置
这篇文章主要介绍了css3编写浏览器背景渐变背景色的方法,现在分享给大家,也给大家做个参考. css中渐变色怎么设置 css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之间的线性 ...
mfc 列表框行颜色设置方法
指定改变CListCtrl中某一行的颜色,比如说刚添加进去的一行,让它改变颜色,这样记录多了,容易看到自己刚刚加入的行,方便操作可查看,也可以让添加和修改的记录显示不一样的颜色,方便的多了,VC自带的 ...
html设置布局颜色设置,css布局中置背景颜色
css机关中不论是设置装备摆设后台色调照常布景图片,都是运用background来完成.这里CSS5为大家通俗简单颠末图文教程让各人驾驭css bac千克round配景花式. 一.语法与结构 1.语法 ...
putty颜色设置|securecrt颜色设置|windows命令行颜色设置
putty注册表如下 Windows Registry Editor Version 5.00;请修改下面的XXXXXX [HKEY_CURRENT_USER\Software\SimonTatham ...
Notepad++编辑过的行颜色设置 LocationNavigate.ini设置高亮黄色绿色修改的行变为黄色修改的行高亮显示
使用NotePad++, 修改的行会显示为橘黄色,.保存之后, 则显示为绿色. 这两种颜色太亮了, 想把色值调低. 于是展开搜索, 发现这个功能是插件Location Navigate 带的. ...
ElementUI table的行高设置
... <el-table:data="tableData"style="width: 100%":row-style="{height: '8 ...
EasyExcel做导出报表时的奇偶行、自动换行设置
[问题来源] 我们设定了奇偶行后,可能要给一个自己喜欢的颜色,如果是用的easyExcel,那我们可能要绕点弯 [放松下] 如果你在为数不多的easyExcel案例和论坛的贴子花费了很多时间, 去解决 ...

html table奇偶行颜色设置 (CSS选择器)

html table奇偶行颜色设置 (CSS选择器)相关推荐

最新文章

热门文章