利用CSS3的伪类画表格

最新推荐文章于 2024-10-05 17:10:47 发布

原创最新推荐文章于 2024-10-05 17:10:47 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 伪类选择器表格样式

css3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用CSS3的伪类选择器，包括动作伪类、目标伪类等，来实现表格的样式设计，从而避免使用JavaScript，简化了表格的制作过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3 伪类分为：动作伪类、目标伪类、语言伪类、结构伪类、UI元素状态伪类、否定伪类选择器。通过这些伪类选择器，可以实现很多原来需要js才能实现的功能。现在我们来用这些伪类选择器来制作表格。

表格1：

<!DOCTYPE html>
<html lang="en">
<head> <title>表格1</title>
 <style>
div.demo{
            width:600px;
            margin:30px auto;
            font-size:14px;
            font-family: "微软雅黑";
            color:#444;
        }
        table{
            *border-collaspe:collaspe;
            border-spacing: 0px;
            width:100%;
        }
        /* 制作圆角表格*/
        .bordered{
            border:solid 1px #ccc;
            border-radius:6px;
            box-shadow: 0 1px 1px #ccc;
        }
        .bordered tr{
            -o-transition:all 0.1s ease-in-out;
            -webkit-transition:all 0.1s ease-in-out;
            -moz-transition:all 0.1s ease-in-out;
            -ms-transition:all 0.1s ease-in-out;
            transition:all 0.1s ease-in-out;
        }

        .bordered th,.bordered td{
            border-left: 1px solid #cccccc;
            border-top:1px solid #cccccc;
            padding:10px;
            text-align:left;
        }
        .bordered td{
            border-left-color:#fff;
        }
        .bordered tr:nth-child(n+3) td{
            border-top:dashed 1px #ccc;
        }
        .bordered tr:nth-child(2n+3){
            background-color:#ebf3fc;
        }
        .bordered .highlight,
        .bordered tr:hover{
            background:#fbf8e9;
        }

        .bordered th{
            background-color:#dce9f9;
            background-img:-webkit-gradient(linear,left top,left bottom,from(#ebf3fc),to(#dce9f9));
            background-img:-webkit-linear-gradient(top,#ebf3fc,#dce9f9);
            background-img:-moz-linear-gradient(top,#ebf3fc,#dce9f9);
            background-img:-o-linear-gradient(top,#ebf3fc,#dce9f9);
            background-img:-ms-linear-gradient(top,#ebf3fc,#dce9f9);
            background-img:linear-gradient(top,#ebf3fc,#dce9f9);
            filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#ebf3fc,endColorStr=#dce9f9);
            -ms-filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#ebf3fc,endColorStr=#dce9f9);
            box-shadow:0 1px rgba(255,255,255,.8) inset;/*表格表头设置内阴影*/
            border-top:none;
            text-shadow:0 1px 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;
        }
</style>
</head>
<body>

<div class="demo">
    <table class="bordered">
        <tr><th>#</th><th>姓名</th><th>年龄</th></tr>
        <tr><td>1</td><td>Jack</td><td>21</td></tr>
        <tr><td>2</td><td>Lucy</td><td>21</td></tr>
        <tr><td>3</td><td>Rose</td><td>31</td></tr>
        <tr><td>4</td><td>Bill</td><td>34</td></tr>
    </table>
</div>
</body>
</html>

</pre><p></p><pre>

效果如下：

表格2：

<!DOCTYPE html>
<html lang="en">
<head> <title>表格2</title>
 <style>
div.demo{
            width:600px;
            margin:30px auto;
            font-size:14px;
            font-family: "微软雅黑";
            color:#444;
        }
        table{
            *border-collaspe:collaspe;
            border-spacing: 0px;
            width:100%;
        }
        .zebra td,
        .zebra th{
            padding:10px;
            border-bottom:1px solid #f2f2f2;
        }
        .zebra tbody tr:nth-child(2n+3){
            background: #f5f5f5;
            box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
        }
        .zebra th{
            text-align:left;
            text-shadow:0 1px 0 rgba(255,255,255,.6);
            border-bottm:1px solid #ccc;
            background-color: #eee;
            background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#eee));
            background-image:-webkit-linear-gradient(top,#f5f5f5,#eee);
            background-image:-o-linear-gradient(top,#f5f5f5,#eee);
            background-image:-ms-linear-gradient(top,#f5f5f5,#eee);
            background-image:-moz-linear-gradient(top,#f5f5f5,#eee);
            background-image:linear-gradient(top,#f5f5f5,#eee);
        }
        .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>

<div class="demo">
    <table class="zebra">
        <tr><th>#</th><th>姓名</th><th>年龄</th></tr>
        <tr><td>1</td><td>Jack</td><td>21</td></tr>
        <tr><td>2</td><td>Lucy</td><td>21</td></tr>
        <tr><td>3</td><td>Rose</td><td>31</td></tr>
        <tr><td>4</td><td>Bill</td><td>34</td></tr>
    </table>
</div>
</body>
</html>

</pre><pre>

效果图：