收藏
批改状态：合格
老师批语：你终于做出来, 为你点赞.
其实这种圆角表格实现开发中极少用到,但是在面试中有可能遇到, 当别人都不会做的时候, 就是你开始表演的时候了
运行效果图
<!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="3.css"> <title>css圆角表格</title> </head> <body> <table> <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: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>8:30-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> <tfoot> <tr> <td>备注</td> <td colspan="5">周末家长来校陪同孩子打扫卫生</td> </tr> </tfoot> </tbody> </caption> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
/* 给表格加边框 */
table {
border: 1px solid #444444;
border-radius: 10px;
}
th，td {
border: 1px solid #444444;
}
/* 折叠边框线 */
/* table {
border-collapse: collapse;
} */
/* 设置表格文本居中 */
table {
width: 800px;
margin: 20px auto;
}
th,
td {
text-align: center;
padding: 10px;
}
/* 表格的标题设置 */
table caption {
font-size: 1.3rem;
font-weight: bolder;
margin-bottom: 15px;
}
/* 设置表头背景颜色 */
table thead tr:first-of-type {
background-color: lightgreen;
border-radius: 20px;
}
/* 设置第1列，第二行背景颜色 */
table tbody>tr:first-of-type>td:first-of-type {
background-color: wheat;
}
/* 设置主体第1列，倒数第二行背景颜色 */
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
background-color: wheat;
}
/* 设置表尾背景色 */
table tfoot>tr:first-of-type {
background-color: lightgray;
border-radius: 20px;
}
/* 设置表格背景阴影 */
table {
box-shadow: 2px 2px 2px #888888;
}
/* 用伪类选择器设置表格主体课程背景颜色 */
table tbody>tr:nth-of-type(1)>td,
table tbody>tr:nth-of-type(2)>td,
table tbody>tr:nth-of-type(3)>td,
table tbody>tr:nth-of-type(4)>td,
table tbody>tr:nth-of-type(5)>td {
background-color: goldenrod;
}
/* 学习用伪类元素设置背景图片 */
table {
position: relative;
}
table:before {
content: "";
width: 800px;
height: 288px;
position: absolute;
left: 0;
top: 40px;
/* 添加伪元素背景 */
background-image: url("1.jpg");
opacity: 0.2;
border-radius: 10px;
}
/* 设置表格圆角 */
table thead tr:nth-of-type(1)>th:nth-of-type(1) {
border-radius: 10px 0 0 0;
}
table thead tr:nth-of-type(1)>th:nth-of-type(6) {
border-radius: 0 10px 0 0;
}
table tfoot tr:nth-of-type(1)>th:nth-of-type(1) {
border-radius: 0 0 0 10px;
}
table tfoot tr:last-of-type>th:last-of-type {
border-radius: 0 0 10px 0;
}
去掉表格，表位，主体的外边框线 table thead tr th {
border-top: none;
}
table tbody tr td:last-of-type {
border-right: none;
}
table tfoot tr td {
border-bottom: none;
}
table thead tr:first-of-type>th:first-of-type {
border-left: none;
}
table thead tr:last-of-type>th:last-of-type {
border-left: none;
}
table tbody tr:first-of-type>th:first-of-type {
border-left: none;
}
table tbody tr:last-of-type>th:last-of-type {
border-left: none;
}
table tfoot tr:first-of-type>th:first-of-type {
border-left: none;
}
table tfoot tr:last-of-type>th:last-of-type {
border-left: none;
}点击 "运行实例" 按钮查看在线实例
圆角的运用主要练习border-radius 且border-collapse不能和border-radius一起用
选择器的运用，圆角的位置，上下左右要找精确
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
