css实现带有四个圆角的table表格 2019年9月6日

CSS制作一张带有四个圆角的表格 示例如下：

实例

<table>
        <caption>重庆巴蜀中学八年级（二班） 课表</caption>
            <thead>
                <tr >
                    <th>星期</th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>     
            </thead>
                    <tbody>
                        <tr>
                            <td rowspan="3" >上午<br>8:30~11:50</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>语文</td>
                            <td>数学</td>
                            <td>英语</td>
                            <td>政治</td>
                            <td>历史</td>
                        </tr>
                        <tr>
                            <td rowspan="2">下午<br>13:50~17:30</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>

实例

/* 为表格及单元格加上边框 */
table,th,td{
    border:1px solid #444;
}
/* 将表格边框线折叠并居中显示 */
table{
    border-collapse: collapse;
    width: 800px;
    margin:0 auto;
    box-shadow: 5px 5px 8px #888;
    position: relative;
    /* 设置是否把表格边框合并为单一的边框 */
    border-collapse: separate;
    /* 设置单元格边框的距离 */
border-spacing: 0;
border-radius:10px;
}
/* 设置单元格的样式 */
th,td{
    text-align: center;
    padding:10px;
    /* border-radius:10px; */
}
/* 设置表格圆角效果 */
table th:first-of-type{
    border-top-left-radius: 10px;
}
table thead>tr:first-of-type>th:last-of-type{
    border-top-right-radius: 10px;
}
table tfoot>tr:first-of-type>td:first-of-type{
    border-bottom-left-radius: 10px;
}
table tfoot>tr:first-of-type>td:last-of-type{
    border-bottom-right-radius: 10px;
}
/* 设置表格标题样式 */
table caption{
    font-size: 1.2em;
    font-weight: bolder;
    margin-bottom: 20px;
}
table thead>tr:first-of-type{
    background-color: lightblue;
}
table tbody>tr:first-of-type>td:first-of-type{
    background-color: wheat;
}
table tbody > tr:nth-last-child(2) > td:first-of-type{
    background-color: goldenrod;
}
table tfoot>tr:last-of-type{
    background-color: lightgrey;
}

/* 为表格添加背景图片 */
table::before{
    content: "";
    width:800px;
    height: 295px;
    left: 0;
    top:48px;
    position: absolute;
    background-image: url("../image/school.jpg");
    opacity: 0.5;
    background-size:cover;
    border-radius: 10px;
}

最终运行的一个效果图：

总结：

要想实现一个table表格带有四个圆角的效果，要将table标签的border-collapse的属性设置为separate,也是默认值，把border-spacing的值设为0，border-radius设置一个值，让后通过伪类选择器选中表格当中的四个角，设置一下圆角就实现了一个带有四个圆角效果的表格。