圆角表格制作方法
实例
<!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>带有圆角的表格</title>
<style>
table {
margin: 20px;
border: 1px solid #999;
width: 800px;
/* border-collapse: collapse; */
/* 折叠边框线但是与圆角border-radius不兼容 */
border-radius: 20px;
/* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
border-collapse: separate;
/* 实现圆角效果，与 border-radius 兼容*/
border-spacing: 0;
/* 去除折叠边框线 */
box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
/*设置单元格的样式*/
}
th,
td {
text-align: center;
padding: 10px;
border: 1px solid #999;
}
table caption {
font-size: 1.3rem;
font-weight: bolder;
margin-bottom: 15px;
}
thead {
background: lightgreen;
}
table thead>tr>th:first-of-type {
border-top-left-radius: 20px;
}
/* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
table thead>tr>th:last-of-type {
border-top-right-radius: 20px;
}
/* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
table tbody>tr:first-of-type>td:first-of-type {
background: bisque;
}
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
background: deepskyblue;
}
table tfoot {
background: cornsilk;
}
table tfoot>tr>td:first-of-type {
border-bottom-left-radius: 20px;
}
/* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
table tfoot>tr>td:last-of-type {
border-bottom-right-radius: 20px;
}
/* 这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 */
</style>
</head>
<body>
<table>
<caption>课程表</caption>
<thead>
<tr>
<th colspan="2">星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" 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 colspan="2" rowspan="2">下午<br>1:30~3: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 colspan="2">备注</td>
<td colspan="5">请值日的同学认真打扫</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
核心的地方：
不采用border-collapse: collapse； 因为：折叠边框线这个属性与圆角border-radius不兼容 。
采用border-collapse: separate； 因为实现圆角效果，可以与 border-radius 兼容。
border-spacing: 0；去除折叠边框线，代替了border-collapse: collapse的作用。
设置：border-radius: 20px;这里只是做了表格最外层的圆角处理，还需要在thead的左右角和tfoot的左右角做圆角处理 。
