<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Css3实现表格隔行变色或隔列变色</title>
 <style>
  body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;}
  table{width:500px;border:0;margin:100px auto 0;text-align:center;border-collapse:collapse;border-spacing:0;}
  table th{background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;}
  table tr:nth-child(odd){background:#F4F4F4;}
  table td:nth-child(even){color:#C00;}
  table tr:nth-child(5){background:#73B1E0;color:#FFF;}
  table tr:hover{background:#73B1E0;color:#FFF;}
  table td,table th{border:1px solid #EEE;}
 </style>
</head>
<body>
 <table>
  <tr>
   <th>xHTML+CSS</th>
   <th>HTML5+CSS3</th>
   <th>Javascript</th>
   <th>jQurey</th>
  </tr>
  <tr>
   <td>xHTML+CSS</td>
   <td>HTML5+CSS3</td>
   <td>Javascript</td>
   <td>jQurey</td>
  </tr>
  <tr>
   <td>xHTML+CSS</td>
   <td>HTML5+CSS3</td>
   <td>Javascript</td>
   <td>jQurey</td>
  </tr>
  <tr>
   <td>xHTML+CSS</td>
   <td>HTML5+CSS3</td>
   <td>Javascript</td>
   <td>jQurey</td>
  </tr>
  <tr>
   <td>xHTML+CSS</td>
   <td>HTML5+CSS3</td>
   <td>Javascript</td>
   <td>jQurey</td>
  </tr>
  <tr>
   <td>xHTML+CSS</td>
   <td>HTML5+CSS3</td>
   <td>Javascript</td>
   <td>jQurey</td>
  </tr>
  <tr>
   <td>xHTML+CSS</td>
   <td>HTML5+CSS3</td>
   <td>Javascript</td>
   <td>jQurey</td>
  </tr>
 </table>
</body>
</html>

使用CSS3实现表格隔行/隔列变色的更多相关文章

  1. 怎样实现excel隔行隔列变色效果的方法

    大家在使用excel的过程中,一定见过别人编排的excel文档,隔行添加单元格背景颜色,也就是通常所说的隔行变色效果.Excel中隔行变色效果的好处是:当在Excel中浏览一个非常大的工作簿中的数据时 ...

  2. css3 之表格隔行分色显示

    <html> <head> <title></title> <style type="text/css"> table{ ...

  3. 如何用while循环输出十行十列变色★☆

    输出十行十列星星 k = 0 #设置一个终止变量 while k < 10: i = 0 #设置一个满十换行变量 while i < 10: print('★',end='') i += ...

  4. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  6. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  7. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  8. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  9. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

随机推荐

  1. Oracle OCP之硬解析在共享池中获取内存锁的过程

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/38684819 1.获得library cache Latch (1)在父游标的名柄没有找到 ...

  2. matlab初试牛刀__小练习

    % T1 % 最好还是设 h=2 D=1 clear,clc; h=2;D=1; x=-2*D:0.01:2*D; y=h*(x>D)+h/D.*x.*(abs(x)<=D)-h*(x&l ...

  3. java中commons-beanutils的介绍

    1.   概述 commons-beanutil开源库是apache组织的一个基础的开源库.为apache中很多类提供工具方法.学习它是学习其它开源库实现的基础. Commons-beanutil中包 ...

  4. Android与IOS异同点对照（1）------ 显示

    Android与IOS作为当前世界上最流行的两大移动端操作系统,都拥有无数的粉丝. 那么对于Android或者IOS的开发人员来说,这两个系统都拥有什么同样或者不同的地方那?如今让我们一起来了解一下A ...

  5. css高级：font-size

    body{ font:62.5%/1.6em "Lucida Grande",Verdana,Geneva,Helvetica,Arial,sansserif; }//font-s ...

  6. 应用程序无法正常启动 0xc0000013 vs2013

    今天下午切换到Windows 优化代码,在debug 的时候一直出现这个问题,折腾了很久,发现原来是系统环境变量的问题,我之前装了双系统,讲原来win7 下的一块E盘删掉做了Linux 盘,而系统环境 ...

  7. maven使用（转载）

    一.安装配置: 1.安装配置JDK    java/javac -version 2.安装配置maven   mvn -v 3.下载项目模板    mvn archetype:generate 二.详 ...

  8. C# 数组转换为DataTable 的三个方法

    C# 数组转换为DataTable 的三个方法   using System; using System.Data; namespace ArrayToDataTable { class ArrayT ...

  9. 【Poj2960】S-Nim & 博弈论

    Position: http://poj.org/problem?id=2960 List Poj2960 S-Nim List Description Knowledge Solution Noti ...

  10. 【POJ 3159】 Candies

    [题目链接] 点击打开链接 [算法] 差分约束系统 [代码] #include <algorithm> #include <bitset> #include <cctyp ...