css3表格隔行变色和表格选中变颜色代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!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;
}
复制代码
posted @   自由无风  阅读(687)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示