html table奇偶行颜色设置 (CSS选择器)
: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>
效果:

可以参考:
http://www.w3school.com.cn/cssref/selector_nth-child.asp
html table奇偶行颜色设置 (CSS选择器)的更多相关文章
- flex 4 datagrid 奇偶行颜色设置
<s:DataGrid width="100%" height="100%" alternatingRowColors="[#ffFFff,#e ...
- table中嵌套table,如何用jquery来控制奇偶行颜色
总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...
- table行颜色设置
function renderingTable(obj){ $(obj).each(function(){ //设置奇数行颜色 $(this).find(" ...
- 如何修改antd中表格的表头样式和奇偶行颜色交替
在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...
- jquery实现奇偶行赋值不同css值
<html> <head> <title>jquery奇偶行css效果</title> <script src="../../jquer ...
- table奇偶行设置颜色代码
- 当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同 (纯CSS)
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Prope ...
- Gridview中奇偶数行颜色设置
在gridview中的RowDataBound事件里面写 switch (e.Row.RowType) {case DataControlRowType.Header: e.Row.BackColor ...
- tab奇偶行颜色交替+插件
(function($){ $.fn.tableUI=function(options){ var defaults={ evenRowclass:"evenRow", oddro ...
随机推荐
- BZOJ.4032.[HEOI2015]最短不公共子串(DP 后缀自动机)
题目链接 1.求A的最短子串,它不是B的子串. 子串是连续的,对B建SAM,枚举起点,在SAM上找到第一个无法匹配点即可.O(n)用SAM能做吗..开始想错了. 2.求A的最短子串,它不是B的子序列. ...
- [USACO07JAN]Balanced Lineup
OJ题号:洛谷2880 思路1: 线段树维护区间最大最小值. #include<cstdio> #include<cctype> #include<utility> ...
- 【BZOJ-4212】神牛的养成计划 Trie树 + 可持久化Trie树
4212: 神牛的养成计划 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 136 Solved: 27[Submit][Status][Discus ...
- 吴恩达-coursera-机器学习-week8
十三.聚类(Clustering) 13.1 无监督学习:简介 13.2 K-均值算法 13.3 优化目标 13.4 随机初始化 13.5 选择聚类数 十四.降维(Dimensionality Red ...
- 9、Redis处理过期keys的机制
写在前面的话:读书破万卷,编码如有神 -------------------------------------------------------------------- 1.Redis处理过期k ...
- Java之多线程 Atomic(原子的)
一.何谓Atomic? Atomic一词跟原子有点关系,后者曾被人认为是最小物质的单位.计算机中的Atomic是指不能分割成若干部分的意思.如果一段代码被认为是Atomic,则表示这段代码在执行过程中 ...
- C++ Primer笔记3_默认实參_类初探_名字查找与类的作用域
1.默认函数实參 在C++中,能够为參数指定默认值,C语言是不支持默认參数的,Java也不支持! 默认參数的语法与使用: (1)在函数声明或定义时,直接对參数赋值.这就是默认參数: (2)在函数调用时 ...
- [Node.js]操作redis
摘要 在实际开发中,免不了要操作mysql,mongodb,redis等数据存储服务器.这里先简单介绍如何操作redis. 一个例子 关于redis服务端的安装这里不再介绍,重点不在这里.感兴趣的可以 ...
- Spark RDD的fold和aggregate为什么是两个API?为什么不是一个foldLeft?
欢迎关注我的新博客地址:http://cuipengfei.me/blog/2014/10/31/spark-fold-aggregate-why-not-foldleft/ 大家都知道Scala标准 ...
- 自定义兼容多种Protobuf协议的编解码器
<从零开始搭建游戏服务器>自定义兼容多种Protobuf协议的编解码器 直接在protobuf序列化数据的前面,加上一个自定义的协议头,协议头里包含序列数据的长度和对应的数据类型,在数据解 ...