使用css实现带有四个圆角的表格--2019年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">
    <link rel="stylesheet" href="static/css/style.css">
    <title>表格</title>
</head>

<body>
    <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: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 rowspan="2">下午<br>14:00 - 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>
</body>

</html>

运行实例 »

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

实例

/* 表格加上边框 */

table {
    /* 考虑到边框重叠问题，所以分开写，一起组成年框 */
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    /* 设置单元格间距 */
    border-spacing: 0;
    /* border-collapse:collapse与border-radius不兼容 */
    border-collapse: separate;
    border-radius: 10px;
    width: 800px;
    margin: 20px auto;
}


/* 每个单元格加上边框 */

th,
td {
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    text-align: center;
    padding: 10px;
}


/* 设置标题样式 */

table caption {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 15px;
}


/* >表示只选择thead的子元素tr，如果tr下面还有tr则不会被选择 */

table thead>tr:first-of-type {
    background-color: lightgreen;
}

table thead>tr:first-of-type>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 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: lightcyan;
}

table tfoot>tr:last-of-type {
    background-color: lightgray;
}

table tfoot>tr:last-of-type>td:first-of-type {
    border-bottom-left-radius: 10px;
}

table tfoot>tr:last-of-type>td:last-of-type {
    border-bottom-right-radius: 10px;
}


/* 美化 */

table {
    box-shadow: 0 0 5px #888;
    position: relative;
}

table:before {
    /* 设置伪元素的内容，大小，位置 */
    content: '';
    width: 800px;
    height: 288px;
    position: absolute;
    left: 0;
    top: 42px;
    /* 设置伪元素背景 */
    background-image: url("../images/xx.jpg");
    /* 图片拉伸充满整个区域 */
    background-size: cover;
    opacity: 0.3;
    border-radius: 10px;
}

运行实例 »

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

1. 如果想实现表格的圆角，border-collapse的值要设为separate。因为当border-collapse设置为collapse时与border-radius不兼容。

2. 关于边框线的设置需要注意，table的边框线会与th，td的重叠，即使设置border-spacing: 0会有叠加。

3. 使用伪类添加背景时需要添加圆角，否则最后背景会有突兀的直角。

4. 关于选择器技巧：例如table thead>tr:first-of-type，>表示只选择thead的子元素tr，如果tr下面还有tr则不会被选择，不会进行递归查询，提高效率。

Correction status：qualified

Teacher's comments：想一下 ,如果离开了老师在课堂上的提示, 自己能否写出来呢