1、使用CSS制作一张带有四个圆角的表格
效果图
实例
<!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">
<style>
/* 给表格加上边框 */
table {
width: 800px;
margin: 20px auto;
}
th,
td {
border: 1px solid #444444;
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: lightgrey;
}
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
background-color: lightskyblue;
}
table tfoot>tr:last-of-type {
background-color: gray;
}
table th:first-child {
border-radius: 6px 0 0 0;
}
table th:last-child {
border-radius: 0 6px 0 0;
}
table tfoot>tr:last-of-type td:first-child {
border-radius: 0 0 0 6px;
}
table tfoot>tr:last-of-type td:last-child {
border-radius: 0 0 6px 0;
}
</style>
<title>圆形表格</title>
</head>
<body>
<table>
<!-- 标题 -->
<caption>
本原小学一年级5班课程表
<!-- <hr> -->
</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-16：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>
<td>备注</td>
<td colspan="5">周一值日</td>
</tfoot>
</tbody>
</table>
</body>
</html>运行实例 »
2，心得
通过选择器对四个角落的td用border-radius属性设置圆角，同时注意border-collapse是不能和border-radius一起使用，否则border-radius会不起作用