<!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. 我的sublime常用快捷键

    sublime一般被应用于前端开发,在实际开发中,我们常用的sublime快捷键有哪些呢?这里汇总一下,常用的排在前面. 常用快捷键 Ctrl+Shift+P:打开命令面板 Ctrl+D:选择重复单词 ...

  2. CentOS 6.4 64位 源码编译hadoop 2.2.0

    搭建环境:Centos 6.4 64bit 1.安装JDK 参考这里2.安装mavenmaven官方下载地址,可以选择源码编码安装,这里就直接下载编译好的wget http://mirror.bit. ...

  3. 转：php连接oracle设定字符集，避免乱码

    原文来自于:http://muyu.iteye.com/blog/399884 数据库用oracle,当php连接oracle的时候,最好指定字符集. 查PHP手册,oci_connect的第四个参数 ...

  4. SPSS时间序列分析

    时间序列分析必须建立在预处理的基础上…… 今天看了一条新闻体会到了网络日志的重要性…… 指数平滑法(Exponential Smoothing,ES)是布朗(Robert G..Brown)所提出,布 ...

  5. linux kernel

    first step. http://www.cyberciti.biz/faq/howto-install-kernel-headers-package/ http://uliweb.clkg.or ...

  6. Spring中使用log4j随笔

    web.xml中的配置: <!--由Sprng载入的log4j配置文件位置--> <context-param> <param-name>log4jConfigLo ...

  7. COM实践经验

    1. COM不能单独建立,必须有一个Delphi工程的实体,EXE或者DLL都行 2. 自动生成Project1_TLB.pas文件 3. 自动生成Unit2.pas文件,其中最重要的包含内容有: i ...

  8. refresh的停车场

    题目描述  refresh最近发了一笔横财,开了一家停车场.由于土地有限,停车场内停车数量有限,但是要求进停车场的车辆过多.当停车场满时,要进入的车辆会进入便道等待,最先进入便道的车辆会优先 进入停车 ...

  9. CentOS卸载openoffice

    rpm -e `rpm -qa |grep openoffice` `rpm -qa |grep ooobasis` 这样算是比较彻底的

  10. DataSet、DataTable、DataRow、DataColumn区别及使用实例

    DataSet 表示数据在内存中的缓存. 属性 Tables  获取包含在 DataSet 中的表的集合. ds.Tables["sjxx"] DataTable 表示内存中数据的 ...