使用CSS制作一张带有四个圆角的表格
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*给表格加上边框*/
table {
border: 1px solid #444444;
border-collapse: separate;
border-spacing: 0;
border-radius: 12px;
}
th, td {
border: 1px solid #444444;
}
/*设置表格的宽度与文本*/
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;
}
table tbody > tr:first-of-type > td:first-of-type {
background-color: wheat;
}
table tbody > tr:nth-last-of-type(3) > td:first-of-type {
background-color: lightcyan;
}
table tbody > tr:nth-last-of-type(3) {
background-color: lightblue;
}
table tbody > tr:nth-last-of-type(1){
background-color: lightgray;
}
table th:first-child{
border-radius: 12px 0 0 0;
}
table th:last-child{
border-radius: 0 12px 0 0;
}
table tr:last-child td:first-child{
border-radius: 0 0 0 12px;
}
table tr:last-child td:last-child{
border-radius: 0 0 12px 0;
}
</style>
<title>css控制表格的样式</title>
</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:30 - 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>
<tr>
<td>备注:</td>
<td colspan="5">周未家长必须来学校帮助孩子打扫卫生</td>
</tr>
</tbody>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例