<!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. 我的Jekyll博客

    我在GitHub Page上托管的Jekyll博客地址:http://lastavenger.github.io/

  2. asp.net(C#)禁止缓存文件

    IIS会按文件地址及参数将文件缓存到客户端,以便再次访问该内容时速度更快.如果要取消这种机制则需要禁止缓存文件. 一.编程方式 Response.Buffer = true; Response.Exp ...

  3. JMS集群部署问题 java.net.ConnectException: Connection refused; No available router to destination

    1:本地spring配置如下 <!-- JndiTemplate --> <bean id="jndiTpl" class="org.springfra ...

  4. 动态树LCT

    #include<iostream> #include<cstdio> #include<cmath> #include<algorithm> usin ...

  5. HBase HFile

    HFile index HFile index, which is proportional to the total number of Data Blocks. The total amount ...

  6. 使用C#开发ActiveX控件 11

    C#开发ActiveX控件   ActiveX 是一个开放的集成平台,为开发人员.用户和 Web生产商提供了一个快速而简便的在 Internet 和 Intranet 创建程序集成和内容的方法. 使用 ...

  7. （转载）php之call_user_func_array的简易用法

    (转载)http://www.cnitblog.com/neatstudio/archive/2006/07/21/13990.html php之call_user_func_array的简易用法 今 ...

  8. LinGo:投资问题——线性规划

    一.根据题目所给数据,建立一张表格方便查看 项目A 项目B 项目C 项目D 可投资年 1,2,3,4 3 2 1,2,3,4,5 收回本利年 次年年末 第5年 第5年 当年年末 本利 1.06 1.1 ...

  9. 《算法问题实战策略》-chaper32-网络流

    基本的网络流模型: 在图论这一块初步的应用领域中,两个最常见的关注点,其一时图中的路径长度,也就是我们常说的的最短路径问题,另一个则是所谓的“流问题”. 流问题的基本概念: 首先给出一张图. 其实所谓 ...

  10. C++开源小贱鸡(simsimi api)

    小贱鸡 这是一个基于Qt C++的跨平台聊天软件,源于群里面玩这个的很多. 你需要一个Qt环境编译程序以便使用. 下载:http://pan.baidu.com/s/1gdnDgC7 项目地址:htt ...