收藏
批改状态：合格
老师批语：很多属性有一些非常少用的值, 试一下会有奇效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式制作表格</title>
<style>
table {
border: 1px solid red;
/*border-collapse: collapse;*/
width: 1100px;
margin: 30px auto;
box-shadow: 2px 2px 2px #777777;
position: relative;
border-radius: 20px;
}
table caption {
font-weight: bold;
font-size: 1.3rem;
padding-bottom: 20px;
}
table > thead > tr:first-of-type{
font-weight: bolder;
background-color: #8affa7;
}
table > tbody > tr:first-of-type td:first-of-type {
background-color: #8abeb7;
}
table > tbody > tr:nth-of-type(4) td:first-of-type {
background-color: #8abeb7;
}
tr td {
border: 1px solid red;
text-align: center;
padding: 10px;
}
table:before{
content: '';
width: 1100px;
height: 299px;
position: absolute;
left: 0;
top: 48px;
background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=15576430,1042561804&fm=26&gp=0.jpg");
background-size: cover;
opacity: 0.5;
border-radius: 20px ;
}
table thead tr:first-of-type td:first-of-type {
border-top-left-radius: 20px;
}
table thead tr:first-of-type td:last-of-type {
border-top-right-radius: 20px ;
}
table tbody > tr:last-of-type > td:first-of-type {
/*background-color: red;*/
border-bottom-left-radius: 20px;
}
table tbody > tr:last-of-type > td:last-of-type {
/*background-color: red;*/
border-bottom-right-radius: 20px;
}
</style>
</head>
<body>
<table cellspacing="0">
<caption>php学习课程表</caption>
<thead>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">上午 <br>10: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>2:00-5: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>
<tr>
<td>备注</td>
<td colspan="5">自习</td>
</tr>
</tbody>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
1，可以通过 table:before 伪元素设置表格背景
2，直接设置<table>标签的border-radius无效，需修改border-collapse: collapse为separate.
3，直接通过 border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius
可设置表格的四个圆角。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
