表格演示2019年9月6日20时 - php中文网学习

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

实例

<!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>

运行实例 »

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

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

Correction status：qualified

Teacher's comments：一个简单的圆角表格, 不知难住了多少英雄好汉下次可以考虑用<div>代替<table>来做, 有人这样做过