收藏
批改状态：合格
老师批语：终于做出来了,是不是蛮有成就感,加油
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <title>css控制表格的样式</title> </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="4">上午<br>8:00 - 8:45</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>语文</td> <td>化学</td> <td>物理</td> <td>英语</td> <td>数学</td> </tr> <tr> <td rowspan="3">下午<br>14:30 - 17: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>化学</td> <td>物理</td> <td>英语</td> <td>数学</td> </tr> </tbody> <tfoot> <tr> <td>备注</td> <td colspan="5">晚自习</td> </tr> </tfoot> </table> </body> </html>
table{
width:800px;
border-collapse: separate;
border-spacing: 0;
border-radius: 30px;
border:1px solid #F08080;
box-shadow:2px 2px 2px #888888;
margin:0 auto;
}
table:before{
content:'';
width:800px;
height:225px;
position:absolute;
left:170px;
top:35px;
/*设置伪元素背景*/
background-image:url("timg.jpg");
background-size:cover;
opacity:0.3;
border-radius: 30px;
}
table caption{
font-size:1.3rem;
font-Weight:bolder;
}
th,td{
border:1px solid #F08080;
text-align: center;
}
tbody{
align:center;
}
tfoot{
align:center;
}
table thead>tr:first-of-type{
}
table thead>tr:first-of-type>th:first-of-type{
border-top:none;
border-left:none;
}
table thead>tr:first-of-type>th:last-of-type{
border-top:none;
border-right:none;
}
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:wheat;
}
table tfoot>tr:last-of-type{
}
table tfoot>tr:last-of-type>td:first-of-type{
border-bottom:none;
border-left:none;
}
table tfoot>tr:last-of-type>td:last-of-type{
border-bottom:none;
border-right:none;
}
总结：1.在table和table:before用border-radius可以使四个角变为圆角，但是左上下角和右上下角的th,td依旧有边框。
2.利用选择器定位到四个角的th或td，再利用border-left，border-right，border-top，border-bottom设置为none 分别可以将，左，右，上，下的边框设为空。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
