<!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;

}