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"> <title>CSS实例-带有四个圆角的表格</title> </head> <body> <table> <h2>高一(一)班课程表</h2> <!-- 第一行，星期 --> <tr> <th>星期</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> </tr> <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>备注</td> <td colspan="5">上午8：10-12：00，下午14：00-17：00</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css样式：
实例
* {
margin: 0;
padding: 0;
}
body {
background: #e9ecf3;
}
body h2 {
display: block;
background: #fff;
text-align: center;
font-size: 21px;
height: 50px;
line-height: 50px;
}
table {
background: #fff;
border-collapse: collapse;
margin: 20px auto;
text-align: center;
border: 1px solid #eef1f5;
border-radius: 15px;
}
th,
td {
border: 1px solid #eef1f5;
padding: 10px 30px;
}
table tr:first-of-type {
background: #3598dc;
color: #fff;
}
table tr:first-of-type th:first-of-type {
border-top-left-radius: 15px;
}
table tr:first-of-type th:last-of-type {
border-top-right-radius: 15px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
