<!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. The underlying provider failed on Open. EF

    本地测试是可以的:但是放到服务器上就不行了: 报错:"The underlying provider failed on Open." 这一情况和我以前遇上的一次错误有点相似啊:都 ...

  2. android：ListView的局部刷新

    1.简介 对于android中的ListView刷新机制,大多数的程序员都是很熟悉的,修改或者添加adapter中的数据源之后,然后调用notifyDataSetChanged()刷新ListView ...

  3. [项目构建 十四]babasport Mycat配置及使用详解.

    首先我们来看下什么是Mycat:MyCat:开源分布式数据库中间件, 这里定义的很简单, 就是分布式数据库的中间件. 其实Mycat 是可以时mysql进行集群的中间件, 我们可以对mysql来分库分 ...

  4. 查看ASM 使用率

    有两种方法: 1.查看v$asm_diskgroup视图 SQL> select group_number,name,total_mb,free_mb from v$asm_diskgroup; ...

  5. java数组并集/交集/差集（补集）

    1.说明 使用java容器类的性质选择容器 2.实现 package com.wish.datastrustudy; import java.util.HashSet; import java.uti ...

  6. delphi调用java编写的webservice

    delphi调用java编写的webservice JAVApojo: public class GroupInfo implements Serializable{    private stati ...

  7. 引用 运行asp.net程序时候，编译器错误消息: CS0016: 未能写入输出文件“c:\WINDOWS\Microsoft.NET\Fra

    引用 运行asp.net程序时候,编译器错误消息: CS0016: 未能写入输出文件“c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary A ...

  8. 下载cppunit

    cppunit的官方地址:http://sourceforge.net/projects/cppunit 方式一:下载打包好的版本 下载地址:http://sourceforge.net/projec ...

  9. Two Sum 解答

    Question: Given an array of integers, find two numbers such that they add up to a specific target nu ...

  10. 使用 Maven 部署 artifact 到 Nexus 教程

    本文侧重讲解如何将已经按照好的 Maven 和 Nexus 连接,即如何通过 Maven 部署 artifact 到 Nexus. 本文前提: 1. 安装好 Maven.可以使用 Maven 创建.打 ...