使用css选择器来实现表格的四角变圆角——2019.9.6

这次对表格来一次操作，用css控制表格中的某个属性进改变。目的嘛就是为了熟悉属性选择操作。

先获得表格~

<table>
        <caption>
            <h2>勇者培训中心课程安排</h2>
        </caption>
        <thead>
            <tr>
                <th>星期</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">上午</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="3">下午</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>
        </tbody>
        <tfoot>
            <tr>
                <td>备注：</td>
                <td colspan="5">还欠修女两枚金币</td>
            </tr>
        </tfoot>
    </table>

接着再用css来改变样式

table {
    border: 1px solid #444;
    border-collapse: separate;
    /*一定要设置这个属性，否则之后的圆角属性就无法修改了*/
    width: 800px;
    margin: 20px auto;
    border-radius: 10px;
    /*表格外框四角圆角*/
}
 
th,
td {
    border: 1px solid #444;
    text-align: center;
    padding: 10px;
}
 
table caption {
    font-size: 1.3rem;
    font-weight: bolder;
    margin-bottom: 15px;
}
 
table thead {
    border-radius: 10px;
}
 
table thead>tr:first-of-type {
    background-color: navajowhite;
}
 
/* 第一行的第一个tr的第一个th左上角变圆角 */
 
table thead>tr:first-of-type>th:first-of-type {
    border-top-left-radius: 10px;
}
 
/* 第一行的最后一个tr的右上角变圆角 */
 
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: green;
}
 
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
    background-color: royalblue;
}
 
table tfoot>tr:last-of-type {
    background-color: yellow;
}
 
/* 左下角 */
 
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: 2px 2px 2px #888;
    position: relative;
}
 
table::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 395px;
    border-radius: 10px;
    left: 0;
    top: 105px;
    background-image: url("http://www.destiny-child.com/images/_index/bg_world_img.jpg");
    background-size: cover;
    opacity: 0.3;
}

最终出来的效果就是：

目前看来这个选择器有点得心应手，就是不知道在其它地方可不可以用的那么顺手。

table的border-collapse: separate;也是意识的盲区，一开始还以为为什么不起作用，加了这个属性才成功修改。

至于表格这个，感觉以后可以和选择器配合拿来做些有意思的游戏~先记下了。