博客列表 >表格演示2019年9月6日20时

表格演示2019年9月6日20时

加勒比强强的博客
加勒比强强的博客原创
2019年09月09日 13:29:25585浏览

表格演示:

图中的表格把背景色设置成白色,表格边框隐藏,形成圆角样式。不过这种设置缺陷较大,不完美~~

10.JPG



实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>

        table {
            border: 0px solid #ccc;
            
            width:800px;
            margin: 20px auto;
            box-shadow: 2px 2px 2px #888888;
            position: relative;
            border-radius: 20px;
            border-collapse: separate;
            border-spacing: 0;
        }
        th, td {
            border: 0px solid #ccc;
            text-align: center;
            padding: 10px;

        }

        table caption {
            font-size: 1.3rem;
            font-weight: bolder;

        }

        table thead > tr:first-of-type > td:first-of-type {
            background-color: bisque;
           border-radius: 20px; /*圆角设置成20px*/
        }
        /*设置主体表格中第一个tr中第一哥td的背景颜色,>指示某一个元素,去掉>则代表后边的全部元素*/
        table tbody > tr:first-of-type > td:first-of-type {
            background-color: wheat;
        }
        table tbody > tr:nth-last-of-type(2) > td:first-of-type {
            background-color: lavender;
        }
        table tfoot > tr:last-of-type {
            background-color: white;
        }

        table thead > tr {

        }

        table:before {
            content:'';
            width: 800px;
            height: 236px;
            position: absolute;
            left:0;
            top:88px;
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568007658456&di=c966d451f8a4e3b553dbd0a3b98cc778&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20120817%2FImg350891171.jpg");
            background-size: cover;
            opacity: 0.5;
            border-radius: 20px;
        }


    </style>
</head>
<body>
<div id="table_wrap">
<table >
    <caption><h2>沈阳二中一年级课程表</h2></caption>

    <thead>
    <tr >
        <th></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    </thead>
    <tbody align="center">
    <tr>
        <td rowspan="2" >上午 <br>7:30-12:00</td>
        <td>语文</td>
        <td>数学</td>
        <td>美术</td>
        <td>数学</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>物理</td>
        <td>地理</td>
        <td>计算机</td>
        <td>音乐</td>

    </tr>
    <tr>
        <td rowspan="2" >下午 <br>13:30-16:10</td>
        <td>计算机</td>
        <td>化学</td>
        <td>语文</td>
        <td>政治</td>
        <td>体育</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>生物</td>
        <td>体育</td>
        <td>化学</td>
        <td>自习</td>

    </tr>

    </tbody>
    <tfoot>
    <tr >
        <td>备注:</td>
        <td colspan="5">每周五下午自习发一张卷纸,做不完不许放学</td>


    </tr>
    </tfoot>

</table>
</div>
</body>
</html>

运行实例 »

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


希望老师抽出一点时间或者通过其他方式教一下有效的方式设置表格圆角,多谢~

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议