<!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. ci output

    ci output类可以将数据存起来,下面这个方法 a 代表的就是存起来的数据 public function(){ $data = array( 'name'=>'alice', ); $th ...

  2. FloatingActionMenu 向上弹出菜单

    本人在github上找到了一个FloatingActionsMenu,精简了其效果(原效果有上下左右四个方向)仅仅保留向上的效果,并做了一定的优化. github上的源代码:地址 ,精简后的源代码地址 ...

  3. 【RefactoringCode】The description of the refactoring book

    Last night the book named [Data Structure with Java Hubbed] was closed. When talked about the advant ...

  4. java中inputstream的使用

    java中的inputstream是一个面向字节的流抽象类,其依据详细应用派生出各种详细的类. 比方FileInputStream就是继承于InputStream,专门用来读取文件流的对象,其详细继承 ...

  5. 小胖说事22-----iOS开发技巧之取消键盘响应和截屏功能

    1.UILable内容模糊 在非Retina的iPad mini 的屏幕上,一个UILable的frame的origin值假设是有小数位(如0.5),就会造成显示模糊,所以不妨用整数值的origin. ...

  6. cgi程序读取post发送的特殊字符，尤其适合于微信公众平台开发中发送被动消息

    [问题]用c编写cgi程序怎样取出html表单post来的数据? [分析]html表单post来的数据形如username="zhang"&&password=&q ...

  7. javaBean注意事项

    1.重写tostring方法 2.属性第一位小写

  8. Set的非重复判断是根据什么判断的

    HashSet 首先来看下HashSet的add()这个方法的源代码: public boolean add(E e) { return map.put(e, PRESENT)==null; } 由此 ...

  9. [模板] manacher(教程)

    还是不会马拉车啊.今天又学了一遍,在这里讲一下. 其实就是一个很妙的思路,就是设置一个辅助的数组len,记录每个点的最大对称长度,然后再存一个mx记录最大的对称子串的右端点.先开二倍数组,然后一点点扩 ...

  10. HDU4336：Card Collector

    题意 有n张卡片,每一次 有pi的概率买到第i张卡.求买到所有卡的期望购买次数. n<=20 解析 Solution 1:大力状压(就是步数除以方案数) #include<iostream ...