使用CSS来写一个响应式表格

2023-06-05 100

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用CSS来写一个响应式表格

这是完整图，是不是非常酷炫，现在让我们一起来做

Let go

首先还是我们的架构，可以使用main标签，这个标签是表示主体的意思，然后给个类名设置顶部

第二个div是设置右边的搜所框样式这里是直接可以选择搜索，因为search在HTML5意思就是搜索的意思，

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

然后我们添加一个内容给类名shell

然后我们设置顶部的架构，这边我们是使用表单来写

顶部样式可以用tr th来写因为th是可以自动居中对齐

而thead是表示表单头部的意思

接下俩我们设置表单主体

用table标签是表格意思，我们可以设置一个一行五列单元格

然后剩下就写一个tr加上五个td的布局，然后等我们样式完成可以复制

下面是展示图

<body>
    <main class="table">
        <section class="header">
            <h1>小超の前端小窝</h1>
            <div class="input-group">
                <input type="search" placeholder="Search Data...">
                <img src="images/search.png">
            </div>
        </section>
        <section class="shell">
            <table>
                <thead>
                    <tr>
                        <th> Id🌙 </th>
                        <th> username💗</th>
                        <th> location💞</th>
                        <th> Last contact date💌</th>
                        <th> message🥰</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td> 001 </td>
                        <td> <img src="images/lisa.jpg">Lisa</td>
                        <td> Korea </td>
                        <td> 2023-5-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 00S</td>
                        <td><img src="images/ikun.jpg"> IKUN </td>
                        <td> 篮球场 </td>
                        <td> 2020-3-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 002 </td>
                        <td><img src="images/金珍妮.jpg"> 金珍妮 </td>
                        <td> Korea </td>
                        <td> 2023-1-28 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 003</td>
                        <td><img src="images/金智秀.jpg"> 金智秀 </td>
                        <td> Korea </td>
                        <td> 2023-5-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 004</td>
                        <td><img src="images/朴彩英.jpg"> 朴彩英</td>
                        <td> Korea </td>
                        <td> 2023-3-07 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 005</td>
                        <td><img src="images/张娜英.jpg"> 张娜英 </td>
                        <td> Korea </td>
                        <td> 2022-8-22 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 006</td>
                        <td><img src="images/池秀媛.jpg">池秀媛 </td>
                        <td> Korea </td>
                        <td> 2023-3-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 007</td>
                        <td><img src="images/美依礼芽.jpg"> 美依礼芽 </td>
                        <td> Japan </td>
                        <td> 2023-4-12 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 008</td>
                        <td><img src="images/桥本环奈.jpg"> 桥本环奈 </td>
                        <td> Japan </td>
                        <td> 2023-2-17 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 009</td>
                        <td><img src="images/ikun.jpg"> IKUN </td>
                        <td> 篮球场 </td>
                        <td> 2020-3-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
</body>

接下来是样式

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            min-height: 100vh;
            background: url(images/05.png) center / cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main.table {
            width: 77vw;
            height: 80vh;
            background-color: #fff5;
            box-shadow: 0 8px 16px #0005;
            border-radius: 16px;
            overflow: hidden;
        }
        .header {
            width: 100%;
            height: 10%;
            background-color: #fff4;
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header .input-group {
            width: 35%;
            height: 50%;
            background-color: #fff5;
            padding: 0 20px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .2s;
        }
        .header .input-group:hover {
            width: 45%;
            background-color: #fff8;
            box-shadow: 0 5px 40px #0002;
        }
        .header .input-group img {
            width: 20px;
            height: 20px;
        }
        .header .input-group input {
            width: 100%;
            background-color: transparent;
            border: none;
            outline: none;
        }
        .shell {
            width: 95%;
            max-height: calc(90% - 25px);
            background-color: #fffb;
            margin: 8px auto;
            border-radius: 10px;
            overflow: auto;
            overflow: overlay;
        }
        .shell::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        table {
            width: 100%;
        }
        td img {
            width: 36px;
            height: 36px;
            margin-right: 10px;
            border-radius: 50%;
            vertical-align: middle;
        }
        table,
        th,
        td {
            border-collapse: collapse;
            padding: 20px;
            text-align: left;
        }
        thead th {
            position: sticky;
            top: 0;
            left: 0;
            background-color: #d5d1defe;
            cursor: pointer;
        }
        /* 偶数行背景色 */
        tbody tr:nth-child(even) {
            background-color: #0000000b;
        }
        tbody tr:hover {
            background-color: #fff6 !important;
        }
        .button {
            padding: 5px 0;
            border-radius: 40px;
            text-align: center;
        }
        tr:nth-child(4n) .button {
            background-color: #86e49d;
            color: #006b21;
        }
        tr:nth-child(4n-1) .button {
            background-color: #ebc474;
        }
        tr:nth-child(4n+1) .button {
            background-color: #d893a3;
            color: #b30021;
        }
        tr:nth-child(4n+2) .button {
            background-color: #6fcaea;
        }

样式里面我们用到了伪类选择器，并集，

并集我想大家都知道，那么我们就来讲nth：child选择器，这个是CSS3新推出的一个选择器

可以选择你想选择的目标，比如我们要选择第一个，那么就是nth：child-first，最后一个是last

也可以根据我们意愿来选择，如果你想选择第5个，那么就写五，既可以写数字也可以写字母

但是字母必须是n，也可以根据不同的用法来写详细请看W3c的文章。

接下来是源码

<!DOCTYPE html>
<html lang="en" title="Coding design">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小超の前端小窝</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            min-height: 100vh;
            background: url(images/05.png) center / cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main.table {
            width: 77vw;
            height: 80vh;
            background-color: #fff5;
            box-shadow: 0 8px 16px #0005;
            border-radius: 16px;
            overflow: hidden;
        }
        .header {
            width: 100%;
            height: 10%;
            background-color: #fff4;
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header .input-group {
            width: 35%;
            height: 50%;
            background-color: #fff5;
            padding: 0 20px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .2s;
        }
        .header .input-group:hover {
            width: 45%;
            background-color: #fff8;
            box-shadow: 0 5px 40px #0002;
        }
        .header .input-group img {
            width: 20px;
            height: 20px;
        }
        .header .input-group input {
            width: 100%;
            background-color: transparent;
            border: none;
            outline: none;
        }
        .shell {
            width: 95%;
            max-height: calc(90% - 25px);
            background-color: #fffb;
            margin: 8px auto;
            border-radius: 10px;
            overflow: auto;
            overflow: overlay;
        }
        .shell::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        table {
            width: 100%;
        }
        td img {
            width: 36px;
            height: 36px;
            margin-right: 10px;
            border-radius: 50%;
            vertical-align: middle;
        }
        table,
        th,
        td {
            border-collapse: collapse;
            padding: 20px;
            text-align: left;
        }
        thead th {
            position: sticky;
            top: 0;
            left: 0;
            background-color: #d5d1defe;
            cursor: pointer;
        }
        /* 偶数行背景色 */
        tbody tr:nth-child(even) {
            background-color: #0000000b;
        }
        tbody tr:hover {
            background-color: #fff6 !important;
        }
        .button {
            padding: 5px 0;
            border-radius: 40px;
            text-align: center;
        }
        tr:nth-child(4n) .button {
            background-color: #86e49d;
            color: #006b21;
        }
        tr:nth-child(4n-1) .button {
            background-color: #ebc474;
        }
        tr:nth-child(4n+1) .button {
            background-color: #d893a3;
            color: #b30021;
        }
        tr:nth-child(4n+2) .button {
            background-color: #6fcaea;
        }
    </style>
</head>
<body>
    <main class="table">
        <section class="header">
            <h1>小超の前端小窝</h1>
            <div class="input-group">
                <input type="search" placeholder="Search Data...">
                <img src="images/search.png">
            </div>
        </section>
        <section class="shell">
            <table>
                <thead>
                    <tr>
                        <th> Id🌙 </th>
                        <th> username💗</th>
                        <th> location💞</th>
                        <th> Last contact date💌</th>
                        <th> message🥰</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td> 001 </td>
                        <td> <img src="images/lisa.jpg">Lisa</td>
                        <td> Korea </td>
                        <td> 2023-5-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 00S</td>
                        <td><img src="images/ikun.jpg"> IKUN </td>
                        <td> 篮球场 </td>
                        <td> 2020-3-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 002 </td>
                        <td><img src="images/金珍妮.jpg"> 金珍妮 </td>
                        <td> Korea </td>
                        <td> 2023-1-28 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 003</td>
                        <td><img src="images/金智秀.jpg"> 金智秀 </td>
                        <td> Korea </td>
                        <td> 2023-5-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 004</td>
                        <td><img src="images/朴彩英.jpg"> 朴彩英</td>
                        <td> Korea </td>
                        <td> 2023-3-07 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 005</td>
                        <td><img src="images/张娜英.jpg"> 张娜英 </td>
                        <td> Korea </td>
                        <td> 2022-8-22 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 006</td>
                        <td><img src="images/池秀媛.jpg">池秀媛 </td>
                        <td> Korea </td>
                        <td> 2023-3-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 007</td>
                        <td><img src="images/美依礼芽.jpg"> 美依礼芽 </td>
                        <td> Japan </td>
                        <td> 2023-4-12 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 008</td>
                        <td><img src="images/桥本环奈.jpg"> 桥本环奈 </td>
                        <td> Japan </td>
                        <td> 2023-2-17 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                    <tr>
                        <td> 009</td>
                        <td><img src="images/ikun.jpg"> IKUN </td>
                        <td> 篮球场 </td>
                        <td> 2020-3-14 </td>
                        <td>
                            <p class="button">发消息</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
</body>
</html>

使用CSS来写一个响应式表格

Let go

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

使用CSS来写一个响应式表格

Let go

热门文章

最新文章

相关课程

相关电子书

相关实验场景