9.6圆角表格制作方法 - 前端开发

实例

<!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">
    <title>带有圆角的表格</title>
    <style>
        table {
            margin: 20px;
            border: 1px solid #999;
            width: 800px;
            /* border-collapse: collapse; */
            /* 折叠边框线但是与圆角border-radius不兼容 */
            border-radius: 20px;
            /* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
            border-collapse: separate;
            /* 实现圆角效果，与 border-radius 兼容*/
            border-spacing: 0;
            /* 去除折叠边框线 */
            box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
            /*设置单元格的样式*/
        }
        
        th,
        td {
            text-align: center;
            padding: 10px;
            border: 1px solid #999;
        }
        
        table caption {
            font-size: 1.3rem;
            font-weight: bolder;
            margin-bottom: 15px;
        }
        
        thead {
            background: lightgreen;
        }
        
        table thead>tr>th:first-of-type {
            border-top-left-radius: 20px;
        }
        /* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
        
        table thead>tr>th:last-of-type {
            border-top-right-radius: 20px;
        }
        /* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
        
        table tbody>tr:first-of-type>td:first-of-type {
            background: bisque;
        }
        
        table tbody>tr:nth-last-of-type(2)>td:first-of-type {
            background: deepskyblue;
        }
        
        table tfoot {
            background: cornsilk;
        }
        
        table tfoot>tr>td:first-of-type {
            border-bottom-left-radius: 20px;
        }
        /* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
        
        table tfoot>tr>td:last-of-type {
            border-bottom-right-radius: 20px;
        }
        /* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
    </style>
</head>

<body>
    <table>
        <caption>课程表</caption>

        <thead>
            <tr>
                <th colspan="2">星期</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2" rowspan="3">上午<br>8:00~11: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>
            <tr>
                <td>历史</td>
                <td>英语</td>
                <td>数学</td>
                <td>科学</td>
                <td>体育</td>
            </tr>
            <tr>
                <td colspan="2" rowspan="2">下午<br>1:30~3: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 colspan="2">备注</td>
                <td colspan="5">请值日的同学认真打扫</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

运行实例 »

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

不采用border-collapse: collapse；因为：折叠边框线这个属性与圆角border-radius不兼容。

采用border-collapse: separate；因为实现圆角效果，可以与 border-radius 兼容。

border-spacing: 0；去除折叠边框线，代替了border-collapse: collapse的作用。

设置：border-radius: 20px;这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理。

Correction status：qualified

Teacher's comments：总结的不错, 看来是真的动了脑筋, 并且还查了度娘

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例