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

简介: 使用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>
相关文章
|
18天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
5月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
179 0
|
4月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
4月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
59 4
|
4月前
|
前端开发 JavaScript
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
|
5月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
4月前
|
编解码 前端开发 容器
CSS弹性布局:打造响应式与灵活的网页设计
CSS弹性布局:打造响应式与灵活的网页设计
99 0
|
6月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
6月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
52 1
|
6月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
79 1