图片演示
代码演示
实例
<!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>
<style>
/* 表格整体 */
table {
border: 1px solid red;
border-spacing: 0;
box-shadow: 1px 1px 1px red;
/*这里看群里说了必须要去掉collapse属性要用separate*/
border-collapse: separate;
width: 800px;
margin: 20px auto;
border-radius: 12px;
position: relative;
}
/* 表格主体 */
th,
td {
border: 1px solid red;
text-align: center;
padding: 10px;
margin: 0;
}
/* 表格标题 */
table caption {
font-size: 1.3rem;
font-weight: bolder;
margin-bottom: 15px;
}
/****************设置表头颜色 ****************/
/* 表格标题th行的颜色 */
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 tr:first-child th:first-child {
border-top-left-radius: 12px;
}
/* 设置表格的右上角圆角处理 */
table tr:first-child th:last-child {
border-top-right-radius: 12px;
}
/* 设置表格的左下角圆角处理 */
tfoot tr:last-child td:first-child {
border-bottom-left-radius: 12px;
}
/* 设置表格的右下角圆角处理 */
tfoot tr:last-child td:last-child {
border-bottom-right-radius: 12px;
}
/* 给表格加个半透明背景图 */
table:before {
content: '';
width: 800px;
height: 88%;
position: absolute;
left: 0;
top: 45px;
background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3087233032,899150152&fm=26&gp=0.jpg");
background-size: cover;
opacity: 0.4;
border-radius: 20px;
}
</style>
</head>
<body>
<table>
<caption>用css制作表格并带圆角跟背景半透明实例</caption>
<thead>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<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="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>
</tbody>
<tfoot>
<tr>
<td>备注</td>
<td colspan="5">好好学习天天向上</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
运用到了之前学过的伪类子元素选择器,过程还是会写出毛病来，又去复习了一遍，目前记住了，基础还是得学好啊～～～