使用CSS3实现表格隔行/隔列变色
<!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实现表格隔行/隔列变色的更多相关文章
- 怎样实现excel隔行隔列变色效果的方法
大家在使用excel的过程中,一定见过别人编排的excel文档,隔行添加单元格背景颜色,也就是通常所说的隔行变色效果.Excel中隔行变色效果的好处是:当在Excel中浏览一个非常大的工作簿中的数据时 ...
- css3 之表格隔行分色显示
<html> <head> <title></title> <style type="text/css"> table{ ...
- 如何用while循环输出十行十列变色★☆
输出十行十列星星 k = 0 #设置一个终止变量 while k < 10: i = 0 #设置一个满十换行变量 while i < 10: print('★',end='') i += ...
- css3表格隔行变色和表格选中变颜色代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)
一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
随机推荐
- 违章查询免费api接口代码
能够依据城市+车牌号+发动机号查询违章信息列表. 违章实体类 package org.wx.xhelper.model; /** * 违章实体类 * @author wangxw * @version ...
- 使用SQL Profile及SQL Tuning Advisor固定运行计划
SQL Profile就是为某一SQL语句提供除了系统统计信息.对象(表和索引等)统计信息之外的其它信息,比方执行环境.额外的更准确的统计信息,以帮助优化器为SQL语句选择更适合的执行计划. SQL ...
- [LeetCode][Java] 4Sum
题目: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...
- LeetCode 349. Intersection of Two Arrays (两个数组的相交)
Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...
- cocos2d-x之android编译环境搭建(第二篇)[版本号:cocos2d-x-3.1.1]
基于 Android NDK 的学习之旅-----环境搭建 工欲善其事 必先利其器 , 以下介绍下 Eclipse SDK NDK Cygwin CDT 集成开发环境的搭建. 1.Android 开发 ...
- JAVA设计模式之:訪问者模式
訪问者模式: 一个作用于某对象结构中各元素的操作,使你能够在不改变各元素类数据结构的前提下添加作用于这些元素的新操作. 结构对象是訪问者模式必备条件.且这个结构对象必须存在遍历自身各个对象的方法. 适 ...
- [Supervisor]supervisor监管gunicorn启动DjangoWeb时异常退出
一开始配置 [program:django_web] command=gunicorn -w 4 -b 0.0.0.0:8080 superadmin.wsgi:application directo ...
- yum -y --downloadonly --downloaddir=/root/ruiy update
依赖关系解决 ============================================================================================= ...
- hibernate字段名和属性
字段名和属性名相同 Annotation:默认为@Basic 注意:如果在成员属性没有加入任何注解,则默认在前面加入了@Basic Xml中不用写column 字段名和属性名不同 Annotation ...
- codevs3327选择数字(单调队列优化)
3327 选择数字 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题目描述 Description 给定一行n个非负整数a[1]..a[n].现 ...