收藏
批改状态：合格
老师批语：看来你对表格线折叠的属性有了认识, 不错
表格加上圆角
<!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>css设置表格</title>
<style>
table {
width: 800px;
margin: 20px auto;
border-collapse: separate;
border-spacing: 0;
position: relative;
}
th,
td {
border: 1px solid black;
text-align: center;
padding: 10px;
font-weight: bolder
}
/* 标题样式 */
table caption {
font-size: 1.3rem;
font-weight: bolder;
margin-bottom: 15px;
}
/* 设置表格圆角样式 */
table thead tr:first-child th:first-child {
border-top-left-radius: 20px;
}
table thead tr:first-child th:last-child {
border-top-right-radius: 20px;
}
table tfoot tr:last-child td:first-child {
border-bottom-left-radius: 20px;
}
table tfoot tr:last-child td:last-child {
border-bottom-right-radius: 20px;
}
/* 表格添加背景图 */
table:before {
/*设置伪元素的内容,大小, 位置*/
content: '';
width: 799px;
height: 300px;
position: absolute;
left: 0;
top: 42px;
/*设置伪元素的背景*/
background-image: url("xx.jpg");
background-size: cover;
opacity: 0.5;
border-radius: 20px;
}
</style>
</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>13：00-15: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>点击 "运行实例" 按钮查看在线实例
总结:
使用子元素选择器选择表格上下左右四个角添加圆角属性
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
