<!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:0;
margin:0;
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: 0;
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;
}