登录  /  注册
博主信息
博文 22
粉丝 0
评论 0
访问量 17569
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
用css对表格的样式进行配置—2019-09-06
sjgbctjda的博客
原创
539人浏览过

1、使用CSS制作一张带有四个圆角的表格

实例

<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="static/css/style1.css">
    <title>带圆角的表格</title>
</head>

<body>
    <table>
        <caption>
            课程表
        </caption>
        <thead>
            <tr>
                <th>时间</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">上午<br>8:00-11:30</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
            <tr>

                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
            <tr>
                <td rowspan="4">下午<br>13:00-16:30</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
            <tr>

                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
            <tr>

                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
            <tr>

                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>备注</td>
                <td colspan="7">身体是革命的本钱</td>
            </tr>
        </tfoot>
    </table>
</body>
</htm

运行实例 »

点击 "运行实例" 按钮查看在线实例

css代码

table,
th,
td {
    border: 1px black solid;
    border-collapse: separate;
    border-spacing: 0;
}

table {
    width: 1100px;
    text-align: center;
    margin: auto;
}

caption {
    font-size: 50px;
    font-weight: bold;
    margin: 20px 0;
}

tr {
    height: 50px;
    line-height: 50px;
}

thead tr {
    height: 70;
    line-height: 70px;
}

th {
    font-size: 35px;
}

td {
    font-size: 28px;
}

thead {
    background: yellowgreen;
}

thead tr th:nth-of-type(6)~* {
    color: red;
}

tbody tr:first-of-type :first-child {
    background: lightblue;
}

tbody tr:nth-of-type(5) :first-child {
    background: lime;
}

tfoot {
    background: lightyellow;
}

table {
    position: relative;
}

table:before {
    content: '';
    width: 1100px;
    height: 540px;
    border-radius: 10px;
    position: absolute;
    top: 105px;
    left: 0;
    background-image: url("../images/xx.jpg");
    background-size: cover;
    opacity: 0.4;
}

thead tr th:first-child {
    border-radius: 10px 0 0 0;
}

thead tr th:last-child {
    border-radius: 0 10px 0 0px;
}

tfoot tr td:first-child {
    border-radius: 0 0 0 10px;
}

tfoot tr td:last-child {
    border-radius: 0 0 10px 0;
}

table {
    border: 2px black solid;
    border-radius: 10px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行结果:运行结果.png

PS:对伪类设置背景图片的时候主体路径的要写对,在css文件中默认的上一级目录为css文件夹,如果需要访问他文件夹中的文件需要类似“../images/xxx”的形式来访问。

批改状态:合格

老师批语:身体是革命的本钱, 如果只剩下生命呢? 哈 加油
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学