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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Beautiful design tables in HTML in the style of a zebra.</title>

	<link rel="stylesheet" href="css/style.css" type="text/css">

</head>

<body>

<div id="container">   

	<table class="zebra">

    <caption>表格隔行变色和滑过变色特效</caption>

		<thead>

        	<tr>

				<th>Date</th>

				<th>Start time</th>

				<th>End time</th>

				<th>Name</th>

            </tr>

		</thead>

        <tbody>

        	<tr>

            	<td>02.06.2010</td>

                <td>10:00</td>

                <td>12:00</td>

                <td>Cleaning</td>

            </tr>

            <tr>

            	<td>02.06.2010</td>

                <td>12:00</td>

                <td>15:00</td>

                <td>Training</td>

            </tr>

            <tr>

            	<td>02.06.2010</td>

                <td>15:00</td>

                <td>17:00</td>

                <td>Rest</td>

            </tr>

            <tr>

            	<td>02.06.2010</td>

                <td>17:00</td>

                <td>21:00</td>

                <td>Work</td>

            </tr>

            <tr>

            	<td>02.06.2010</td>

                <td>21:00</td>

                <td>07:00</td>

                <td>Sleep</td>

            </tr>

        </tbody>

	</table>

</div>

</body>

</html>

　　

@charset "UTF-8";

html, body{

    padding:;

    margin:;

    position:relative;

    background:url(../img/body.jpg);

    background-repeat:repeat;

    color:#fff;

    letter-spacing:1px;

    font-family:Georgia, "Times New Roman", Times, serif;

}

.zebra caption{

    font-size:20px;

    font-weight:normal;

    background:url(../img/zebratable.png);

    background-repeat:no-repeat;

    background-position: 130px center;

    padding-top: 20px;

    height:50px;}

#container{

    padding-top:20px;

    width:960px;

    margin:0 auto;

}

table {

    border-collapse: collapse;

    border-spacing:;

    width:100%;

    -webkit-box-shadow:  0px 2px 1px 5px rgba(242, 242, 242, 0.1);

    box-shadow:  0px 2px 1px 5px rgba(242, 242, 242, 0.1);

}

.zebra {

    border: 1px solid #555;

}

.zebra td {

    border-left: 1px solid #555;

    border-top: 1px solid #555;

    padding: 10px;

    text-align: left;

}

.zebra th, .zebra th:hover {

    border-left: 1px solid #555;

    border-bottom: 1px solid #828282;

    padding: 20px;

    background-color:#151515 !important;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#151515), to(#404040)) !important;

    background-image: -webkit-linear-gradient(top, #151515, #404040) !important;

    background-image:    -moz-linear-gradient(top, #151515, #404040) !important;

    background-image:     -ms-linear-gradient(top, #151515, #404040) !important;

    background-image:      -o-linear-gradient(top, #151515, #404040) !important;

    background-image:         linear-gradient(top, #151515, #404040) !important;

    color:#fff !important;

    font-weight:normal;

}

.zebra tbody tr:nth-child(even) {

    background: #000 !important;

    color:#fff;

}

.zebra tr:hover *{

    background: #eeeeee;

    color:#000;

}

.zebra tr {

    background:#404040;

    color:#fff;

}

css3表格隔行变色和表格选中变颜色代码的更多相关文章

  1. css选择器，用来处理隔行变色的表格

    CSS3 :nth-last-child() 选择器,可以用来处理隔行变色的表格,详情请参考网上资料.

  2. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

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

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

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

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

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

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

  6. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  7. 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...

  8. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  9. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

随机推荐

  1. 10个Java面试题及答案

    1. 什么是JVM? 为什么称Java为跨平台的编程语言? Java虚拟机(Java Virtual Machine)是可以执行Java字节码的虚拟机,每个Java源文件将被编译成字节码文件,然后在J ...

  2. 通过示波器分析TypeB卡通讯数据

    这几天,使用NFC芯片模拟了一张TypeB的cpu卡,在调试过程中,因为要检查射频性能,所以用示波器抓取了RFID读卡器和TypeB CPU卡之间的通讯数据.READER发送的数据位106K ASK调 ...

  3. BZOJ1629: [Usaco2007 Demo]Cow Acrobats

    1629: [Usaco2007 Demo]Cow Acrobats Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 601  Solved: 305[Su ...

  4. oracle连接总结（内连接、外连接、自然连接，交叉连接，自连接）

    1.简述  1) 两个表的连接,是通过将一个表中的一列或者多列同另一个表中的列链接而建立起来的.用来连接两张表的表达式组成了连接条件.当连接成功后,第二张表中的数据就同第一张表连接起来了,并形成了复合 ...

  5. HDOJ(HDU) 2093 考试排名(Arrays.sort排序、类的应用)

    Problem Description C++编程考试使用的实时提交系统,具有即时获得成绩排名的特点.它的功能是怎么实现的呢? 我们做好了题目的解答,提交之后,要么"AC",要么错 ...

  6. F - True Liars - poj1417（背包+并查集）

    题意:有这么一群人,一群好人,和一群坏人,好人永远会说实话,坏人永远说假话,现在给你一组对话和好人与坏人的数目P1, P2. 数据里面的no是A说B是坏人, yes代表A说B是好人,就是这样,问题能不 ...

  7. rpm与dpkg yum与apt-get详解

    由于自由软体的蓬勃发展,加上大型Unix-Like 主机的强大效能,让很多软体开发者将他们的软体使用Tarball 来释出. 后来Linux 发展起来后,由一些企业或社群将这些软体收集起来制作成为di ...

  8. ubuntu环境配置

    网络配置 主要文件:/etc/network/interfaces,这里是IP.网关.掩码等的一些配置: # This file describes the network interfaces av ...

  9. SKPhysicsContactDelegate协议

    符合 NSObject 框架 /System/Library/Frameworks/SpriteKit.framework 可用性 可用于iOS .0或者更晚的版本 声明于 SKPhysicsWorl ...

  10. Android ScrollView

    ScrollView 滚动视图 滚动视图用于为其它组件添加滚动条,在默认的情况下,当窗体中内容比较多,而一屏显示不下时,超出的部分不能被用户所看到.因为Android的布局管理器本身没有提供滚动屏幕的 ...