<!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. bzoj1072【SCOI2007】排列perm

    1072: [SCOI2007]排列perm Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 1479  Solved: 928 [id=1072&q ...

  2. tar 查看压缩包内容

  3. 1.3－动态路由协议EIGRP

    EIGRP(Enhanced IGRP) EIGRP的特点: IGRP/EIGRP都是CISCO的私有协议. 1:是唯一的一种LS/DV的混合协议. 2:Rapid convergence EIGRP ...

  4. 双logo

    from aip import AipSpeech bd_k_l = ['11059852', '5Kk01GtG2fjCwpzEkwdn0mjw', 'bp6Wyx377Elq7RsCQZzTBgG ...

  5. 获取Access数据里所有表的名称和表的字段

    -------------//获取Access数据库表名        public void GetTableName()        {                string connSt ...

  6. RDA 升级

    烧录BOOT升级方式: 1.连接 2.烧录BOOT 1)升级“bootrom_raw.bin” 99K,这种升级方式需要Tera Term 工具,按“F5”  U盘升级. 编译的升级文件“RR8503 ...

  7. bzoj2073

    状压dp 预处理每个状态的初始值,枚举子集就行了 #include<bits/stdc++.h> using namespace std; , inf = ; int W, n; < ...

  8. Linux命令补充及基础优化。

    1.用户部分 1.1 创建新用户 涉及命令 useradd [root@oldboyedu-50 ~]# useradd oldboy #添加用户 oldboy 1.2 设置密码 [root@oldb ...

  9. node.js的模块引用

    1.模块的引用示例 var      math   =    require(‘math’): 在common.js规范中,存在require()方法,这个方法接受模块标识,此引引入一个模块的api ...

  10. SpringBoot入门之HelloWorld

    1.SpringBoot简介 百度百科:Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而 ...