收藏
批改状态：合格
老师批语：实现圆角表格的方法很多, 并没有一个标准答案, 大家可以通过查资料来提升自己的技能 , 这不属于主流技术, 不会写并不会影响到后面的课程, 咱们就不在直播课堂中说了, 你可以当作进阶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>css圆角表格</title>
<style>
table{
width:800px;
margin:0 auto;
border-collapse:collapse;
}
/*设置头部caption样式*/
table caption {
font-size: 20px;
font-weight:bolder;
padding:10px;
}
/*设置th, td样式*/
th, td{
border:1px solid #CCCCCC;
padding:15px;
text-align:center;
}
/*设置底部tfoot样式*/
table tfoot{
font-size:12px;
}
/*设置左上角圆角*/
table tr:first-child th:first-child {
border-top-left-radius: 6px;
border:none
}
/*设置右上角圆角*/
table tr:first-child th:last-child {
border-top-right-radius: 6px;
border:none
}
/*设置左下角圆角*/
table tr:last-child td:first-child{
border-bottom-left-radius:6px;
border:none
}
/*设置右下角圆角*/
table tfoot > tr:last-child td:last-child{
border-bottom-right-radius:6px;
border:none
}
/*给tr添加背景颜色*/
table thead > tr:first-of-type {
background-color:#09F;
color:#fff
}
table tbody > tr:first-of-type > td:first-of-type {
background-color: #9CC;
}
table tbody > tr:nth-last-of-type(2) > td:first-of-type{
background-color: #C9C;
}
/*给底部添加背景颜色*/
table tfoot{
background-color: #F7F7F7;
}
</style>
</head>
<body>
<table>
<caption>课程表</caption>
<!------------------头部---------------------------->
<thead>
<tr>
<th colspan="2"> </th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
<tr>
</thead>
<!----------------------------主体---------------------------->
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>1</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>数学</td>
<td>化学</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>生物</td>
<td>生物</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>英语</td>
<td>生物</td>
<td>英语</td>
<td>体育</td>
<td>英语</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td>化学</td>
<td>体育</td>
<td>数学</td>
<td>化学</td>
<td>体育</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>5</td>
<td>体育</td>
<td>语文</td>
<td>化学</td>
<td>语文</td>
<td>数学</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td>生物</td>
<td>化学</td>
<td>体育</td>
<td>英语</td>
<td>语文</td>
<td> </td>
<td> </td>
</tr>
</tbody>
<!----------------------------底部---------------------------->
<tfoot>
<tr>
<td colspan="9" align="left">如果体育老师生病，那么将会由其他几位老师中的任何一个代课</td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
border-collapse 用于表格属性, 表示表格的两边框合并为一条；
我觉得这个真的有点难的，我百度了好多的CSS圆角表格制作方法，希望老师能讲一下。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
