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>课程表</title>
<style>
table {
width: 800px;
/* border: 1px solid #000; */
/* border-collapse: collapse; */
margin: 50px auto;
position: relative;
}
th,
td {
border: 1px solid #000;
text-align: center;
padding: 10px;
}
table caption {
font-size: 1.6em;
font-weight: bold;
margin-bottom: 20px;
}
table thead>tr:first-of-type {
background-color: aqua;
}
table tbody>tr:first-of-type>td:first-of-type {
background-color: bisque;
}
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
background-color: aliceblue;
}
table tfoot>tr:last-of-type {
background-color: ivory;
}
table:before {
content: '';
width: 800px;
height: 300px;
position: absolute;
left: 0;
top: 54px;
background-image: url(http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg);
background-size: cover;
opacity: 0.5;
border-radius: 12px;
}
table {
border-spacing: 0;
border-radius: 12px;
}
table thead>tr>th:first-of-type {
border-top-left-radius: 12px;
}
table thead>tr>th:last-of-type {
border-top-right-radius: 12px;
}
table tfoot tr {
border-bottom-left-radius: 12px;
}
table tfoot td:first-of-type {
border-bottom-left-radius: 12px;
}
table tfoot td:last-of-type {
border-bottom-right-radius: 12px;
}
</style>
</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="3">下午<br>14:00-16:00</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>
<td>备注：</td>
<td colspan="5">周未家长必须来学校帮助孩子打扫卫生</td>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
