<!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. python_swift_project_swift使用

    1. swift的存取用curl命令. 我们先把pub url 和token保存起来 root@A071103070098:~# export pubURL=http://10.194.148.102 ...

  2. Java 实现代理(Proxy)模式

    类图 /** * 游戏者接口 * @author stone * */ public interface IGamePlayer { // 登录游戏 public void login(String ...

  3. Rsync命令的使用

    Rsync的命令格式能够为下面六种: rsync [OPTION]- SRC DEST rsync [OPTION]- SRC [USER@]HOST:DEST rsync [OPTION]- [US ...

  4. LeetCode 690. Employee Importance （职员的重要值）

    You are given a data structure of employee information, which includes the employee's unique id, his ...

  5. LeetCode 9. Palindrome Number （回文数字）

    Determine whether an integer is a palindrome. Do this without extra space. 题目标签:Math 题目给了我们一个int x, ...

  6. Windows中的时区信息

    时区 Windows API 没有提供直接得到特定时区信息的功能,Windows 系统中的时区信息存储在注册表中下面的位置: HKEY_LOCAL_MACHINE     SOFTWARE      ...

  7. 大神是如何装逼的 之 vim插件使用taglist和nerdtree

    本文转载自:http://blog.csdn.net/yaoxingshuai/article/details/51385332 本文主要讲述如何在vim下配置taglist,nerdtree(看代码 ...

  8. [linux环境配置]个人用持续更新ing～

    alias ll='ls -la' export PATH=$PATH:~/Desktop/myscript alias gpush='git push origin HEAD:refs/for/ma ...

  9. 【高德地图API】注册密钥

    能正常使用高德地图API所有功能的前提是添加了密钥.高德API官网地址:http://api.amap.com/ 注册步骤:1.注册账号 2.填写开发者信息 3.注册密钥 1.注册账号(略过) 2.填 ...

  10. setings.py配置文件详解

    BASE_DIR指的是项目的根目录.SECRET_KEY是安全码. # SECURITY WARNING: don't run with debug turned on in production! ...