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 ...
随机推荐
- 使用 Maven 来管理项目 & 从 0 开始搭建 Maven 项目
maven 是 apache 的一个开源软件,纯 Java 编写的,专门用于管理 Java 项目的一个工具. maven 就是一个工具而已,用不用都不耽误你刷刷的敲代码,那为什么我们还要学习它呢? 那 ...
- AI技术在智能海报设计中的应用
背景 在视觉设计领域中,设计师们往往会因为一些简单需求付出相当多的时间,比如修改文案内容,设计简单的海报版式,针对不同机型.展位的多尺寸拓展等.这些工作需要耗费大量的时间.人力成本(5~6张/人日), ...
- collectionFramwork-1
1. Set.List和Map可以看做集合的三大类. List集合是有序集合,集合中的元素可以重复,访问集合中的元素可以根据元素的索引来访问. Set集合是无序集合,集合中的元素不可以重复,访问集合中 ...
- JVM简介堆中新生代老年代浅析
一.JVM内存结构由程序计数器.堆.栈.本地方法栈.方法区等部分组成.1)程序计数器 几乎不占有内存.用于取下一条执行的指令.2)堆 所有通过new创建的对象的内存都在堆中分配,其大小可以通过-Xmx ...
- 暴力探测蓝牙设备工具redfang
暴力探测蓝牙设备工具redfang 根据是否可以被扫描到,蓝牙设备具有可见(Disoverable)和不可见(non discoverable)两种模式.为了扫描不可见蓝牙设备,Kali Linu ...
- HTTP协议-缓存
HTTP 协议中,缓存更多关心的文档资源的再利用.其目的是减少数据传输,加快相应速度等等.而对于缓存采用的是什么方案,也就是存在内存中还是硬盘中之类的问题,就属于另外的内容了. 假设,我身在广东,但是 ...
- android activity 启动模式
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 1,标准的, 2,单个 顶部 3,单个 任务 4,单个 实例 标准的 就是 每启动一次这 ...
- hdu 4612 边双联通 ***
题意:有N 个点,M条边,加一条边,求割边最少.(有重边) 链接:点我 先求双连通分量,缩点形成一个生成树,然后求这个的直径,割边-直径即是答案 #pragma comment(linker, &qu ...
- js的sort()方法
说明 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序.要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较. arra ...
- BZOJ2888 : 资源运输
显然资源集合处就是树的重心,这题需要动态维护树的重心. 每个连通块以重心为根,用link-cut tree维护每个点的子树大小以及子树内所有点到它的距离和. 合并两个连通块时,考虑启发式合并,暴力往大 ...