18.css写的一个table(摘自大漠大神)

最新推荐文章于 2022-11-27 11:08:05 发布

banchixiang9107

最新推荐文章于 2022-11-27 11:08:05 发布

阅读量250

点赞数

原文链接：http://www.cnblogs.com/famLiu/p/7232788.html

版权

效果图

DOM+CSS

<html>
    <head>
        <meta charset="UTF-8">
        <title>美化表格</title>
        <style type="text/css">
            *{
                margin: 0;padding: 0;
            }
            body{
                padding: 40px 100px;
            }
            .demo{
                width: 600px;
                margin: 40px auto;
                font-family: "trebuchet ms" , "lucida sans typewriter" , Arial;
                font-size: 14px;
                color: #444;
            }
            table{
                *border-collapse: collapse;/*IE*/
                border-spacing: 0;
                width: 100%;
            }
            .bordered{
                border: solid #CCCCCC 1px;
                border-radius: 6px;
                box-shadow: 0 1px 1px #CCCCCC;
            }
            .bordered tr{
                -moz-transition: all 0.1s ease-in-out;
                -o-transition: all 0.1s ease-in-out;
                -webkit-transition: all 0.1s ease-in-out;
                -ms-transition: all 0.1s ease-in-out;
                transition: all 0.1s ease-in-out;
            }
            .bordered .highlight,
            .bordered tr:hover{
                background: #fbf8e9;
            }
            .bordered td,
            .bordered th{
                border-left: 1px solid #ccc;
                border-top: 1px solid #CCCCCC;
                padding: 10px;
                text-align: left;
            }
            .bordered th{
                /*表格表头添加渐变背景色*/
                background-color: #dce9fc;
                background-image: linear-gradient(top, #ebf3fc, #dec9f9);
                background-image: -webkit-gradient(linear , left, top, left, bottom, from(#ebf3fc), to(#dec9f9));
                background-image: -moz-linear-gradient(top, #ebf3fc, #dec9f9);
                background-image: -ms-linear-gradient(top, #ebf3fc, #dec9f9);
                background-image: -webkit-linear-gradient(top, #ebf3fc, #dec9f9);
                background-image: -o-linear-gradient(top, #ebf3fc, #dec9f9);
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebf3fc, endColorstr=#dec9f9);
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebf3fc, endColorstr=#dec9f9)";
                box-shadow: 0 1px 0 rgba(255,255,255,.8);
                border-top: none;
                text-shadow: 0 1px 0 rgba(255,255,255,.5);
            }
            /*去除表格每一行的左边框*/
            .bordered td:first-child,
            .bordered th:first-child{
                border-left: none;
            }
            .bordered th:first-child{
                border-radius: 6px 0 0 0;
            }
            .bordered th:last-child{
                border-radius: 0 6px 0 0;
            }
            .bordered tr:last-child td:first-child{
                border-radius: 0 0 0 6px;
            }
            .bordered tr:last-child td:last-child{
                border-radius: 0 0 6px 0;
            }
            /*斑马线表格*/
            .zebra td,.zebra th{
                padding: 10px;
                border-bottom: 1px solid #f2f2f2;
            }
            .zebra .alertnate,
            .zebra tr:nth-child(even){
                background: #f5f5f5;
                box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
            }
            .zebra th{
                text-align: left;
                background-color: #eee;
                border-bottom: 1px solid #CCCCCC;
                background-image: linear-gradient(top, #f5f5f5, #eee);
                background-image: -webkit-gradient(linear , left, top, left, bottom, from(#f5f5f5), to(#eee));
                background-image: -moz-linear-gradient(top, #f5f5f5, #eee);
                background-image: -ms-linear-gradient(top, #f5f5f5, #eee);
                background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
                background-image: -o-linear-gradient(top, #f5f5f5, #eee);
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#eee);
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#eee)";
                box-shadow: 0 1px 0 rgba(255,255,255,.8);
                border-top: none;
                text-shadow: 0 1px 0 rgba(255,255,255,.5);
            }
            .zebra td:first-child,
            .zebra th:first-child{
                border-left: none;
            }
            .zebra th:first-child{
                border-radius: 6px 0 0 0;
            }
            .zebra th:last-child{
                border-radius: 0 6px 0 0;
            }
            .zebra tr:last-child td:first-child{
                border-radius: 0 0 0 6px;
            }
            .zebra tr:last-child td:last-child{
                border-radius: 0 0 6px 0;
            }
        </style>
    </head>
    <body>
        <table class="demo bordered">
            <tr>
                <th>#</th>
                <th>name</th>
                <th>age</th>
                <th>job</th>
                <th>OT</th>
            </tr>
            <tr>
                <td>1</td>
                <td>john</td>
                <td>22</td>
                <td>nnnnnn</td>
                <td>Dxxxxxata</td>
            </tr>
            <tr>
                <td>2</td>
                <td>lilei</td>
                <td>11</td>
                <td>dd</td>
                <td>Dabbbbbta</td>
            </tr>
            <tr>
                <td>3</td>
                <td>lily</td>
                <td>22</td>
                <td>vbf</td>
                <td>kkkkkkk</td>
            </tr>
        </table>
        
        <table class="demo zebra">
            <tr>
                <th>#</th>
                <th>name</th>
                <th>age</th>
                <th>job</th>
                <th>OT</th>
            </tr>
            <tr>
                <td>1</td>
                <td>john</td>
                <td>22</td>
                <td>nnnnnn</td>
                <td>Dxxxxxata</td>
            </tr>
            <tr>
                <td>2</td>
                <td>lilei</td>
                <td>11</td>
                <td>dd</td>
                <td>Dabbbbbta</td>
            </tr>
            <tr>
                <td>3</td>
                <td>lily</td>
                <td>22</td>
                <td>vbf</td>
                <td>kkkkkkk</td>
            </tr>
        </table>
    </body>
</html>

转载于:https://www.cnblogs.com/famLiu/p/7232788.html

banchixiang9107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
18.css写的一个table(摘自大漠大神)

效果图DOM+CSS<html> <head> <meta charset="UTF-8"> <title>美化表格</title> <style type="text/css"> *{ ...
复制链接

扫一扫