CSS3 - 响应式表格项目实战

最新推荐文章于 2024-04-19 10:08:45 发布

UIEngineer

最新推荐文章于 2024-04-19 10:08:45 发布

阅读量313

点赞数

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/zjsfdx/article/details/79331031

版权

HTML5/CSS3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

index.htmll

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link href="begin.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1>宇宙学院相关课程</h1>
    <table class="responsive">
        <thead>
            <tr>
                <th>课程序号</th>
                <th>课程名称</th>
                <th>课程操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="number">150406</td>
                <td class="name">移动应用开发课程</td>
                <td class="actions">
                    <a href="#">修改</a>
                    <a href="del">删除</a>
                </td>
            </tr>
            <tr>
                <td class="number">150407</td>
                <td class="name">PC应用开发课程</td>
                <td class="actions">
                    <a href="#">修改</a>
                    <a href="del">删除</a>
                </td>
            </tr>
            <tr>
                <td class="number">150408</td>
                <td class="name">PHP应用开发课程</td>
                <td class="actions">
                    <a href="#">修改</a>
                    <a href="del">删除</a>
                </td>
            </tr>
            <tr>
                <td class="number">150409</td>
                <td class="name">VUE应用开发课程</td>
                <td class="actions">
                    <a href="#">修改</a>
                    <a href="del">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

begin.css

h1{
    font-size:30px;
    text-align:center;
    color:#666;
}
table.responsive{
    width:98%;
    margin:0 auto;
    border:1px solid #666;
    border-collapse:collapse;   
    box-shadow:0 0 10px 0 rgba(0,0,0,.5);
}
table.responsive th,table.responsive td{
    border:1px solid #666;
    padding:.5em 1em;
}
table.responsive th{
    background-color:#35B558;
}
table.responsive .actions a{
    color:#ff5c00;
    text-decoration:none;
    padding:0 4px;
}
table.responsive .number,table.responsive .actions{
    text-align:center;
}

/*
    媒体查询
**/
@media (max-width:480px){
    table.responsive{
        box-shadow:none;
        border:none;
    }
    table.responsive thead{
        display:none;
    }
    table.responsive tr,table.responsive td{
        display:block;
        border:none;
        position:relative;
    }
    table.responsive tr{
        margin-bottom:1em;
        box-shadow:0 1px 10px 0 rgba(0,0,0,.2);
    }
    table.responsive .number{
        background-color:#35B558;
        text-align:left;
        padding-left:28%;
    }
    table.responsive .number::before{
        content:'课程序号';
        position:absolute;
        left:.5em;
        top:.5em;
        font-weight:bold;
    }
    table.responsive .name{
        text-align:left;
        padding-left:28%;
    }
    table.responsive .name::before{
        content:'课程名称';
        position:absolute;
        left:.5em;
        top:.5em;
        font-weight:bold;
    }
    table.responsive .actions{
        position:absolute;
        right:0;
        top:0;
    }
}

这里写图片描述

UIEngineer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 - 响应式表格项目实战

index.htmll<!doctype html><html><head><meta charset="utf-8"><title></title><link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"><link href="begin.css" rel="styl
复制链接

扫一扫

专栏目录