收藏
批改状态：合格
老师批语：这个作业看上去是不是特别的简单, 但写起来却非常的麻烦, 很多事情其实都是这样的
<style>
table {
width: 600px;
margin: 0 auto;
box-shadow: 2px 2px 2px #333333;
border-radius: 20px;
border: 1px solid black;
border-spacing: 0;
}
th,
td,
table {
border: 1px solid black;
text-align: center;
margin: 0;
/* padding: 0; */
box-sizing: border-box;
}
th,
td {
border-left: none;
border-top: none;
padding: 10px 20px;
}
table thead>tr {
background-color: lightcoral;
}
tbody tr:first-of-type>td:first-of-type {
background-color: lightgray;
}
tbody tr:nth-child(4)>td:first-of-type {
background-color: lightpink;
}
tbody tr:last-child {
background-color: lightblue;
}
table thead tr th:first-of-type {
border-top-left-radius: 20px;
}
table thead tr th:last-of-type {
border-top-right-radius: 20px;
}
table tbody tr:last-of-type td:first-of-type {
border-bottom-left-radius: 20px;
}
table tbody tr:last-of-type td:last-of-type {
border-bottom-right-radius: 20px;
}
</style>
<body>
<table>
<caption>
<h3>本周课程表</h3>
</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="2">下午</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 colspan="2">备注</td>
<td colspan="4">自习一周</td>
</tr>
</tbody>
</table>
</body>点击 "运行实例" 按钮查看在线实例
总结：
1、在给表格设置边框的时候，table元素 和表格中的单元格元素都被加上了边框，所以表格会出现双层边框
2、border-collapse 和border-radius一起用的时候，border-radius会失效
3、所以使用 border-spacing 将表格之间的间距设置为0，然后再用border-left/top清除所有单元格的上、左边框线
4、然后给table加上圆角属性
5、最后给左上、右上、左下、右下4个单元格的对应4个角加上圆角属性。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
