收藏
批改状态：合格
老师批语：试过背景图色的拉伸功能了吗?或者对背景图像进行定位, 你还可以直接对背景图下手, 直接修改它也行, 自古华山不止一条路
⒈使用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">
<link rel="stylesheet" href="exercise1.css">
<title>联大大四课程表</title>
</head>
<body>
<table>
<!-- 标题 -->
<caption>学生个人课表</caption>
<!-- 表头 -->
<thead>
<tr>
<th colspan="2" rowspan="1">时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<td colspan="2">早晨</td>
<td colspan="7">自习</td>
</tr>
<tr>
<td rowspan="5">上午</td>
<td>第1节</td>
<td></td>
<td rowspan="2">汉语阅读与写作(II)<br>{第2-9周}<br>吕会华<br>特综606</td>
<td rowspan="2">网站优化与推广<br>{第2-9周}<br>董雪燕<br>特综416</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第2节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第3节</td>
<td></td>
<td>汉语阅读与写作(II)<br>{第2-9周}<br>吕会华<br>特综606</td>
<td rowspan="2">网站优化与推广<br>{第2-9周}<br>董雪燕<br>特综416</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第4节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第5节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>第6节</td>
<td rowspan="2">网站优化与推广<br>{第2-9周}<br>董雪燕<br>特综416</td>
<td></td>
<td></td>
<td rowspan="2">汉语阅读与写作(II)<br>{第2-9周}<br>吕会华<br>特综606</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第7节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第8节</td>
<td></td>
<td></td>
<td></td>
<td>汉语阅读与写作(II)<br>{第2-9周}<br>吕会华<br>特综606</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第9节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">晚上</td>
<td colspan="7">自习</td>
</tr>
</tbody>
<!-- 表底 -->
<tfoot>
<tr>
<td colspan="2">备注</td>
<td colspan="7">沉迷学习无法自拔 研究编程无法提高</td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
/* 整个表格 */
table {
width: 1000px;
text-align: center;
margin: 20px auto;
border-collapse: separate;
border-spacing: 0;
}
/* 表头，主体，表底的行的高度*/
table thead tr,
table tbody tr,
table tfoot tr {
height: 40px;
}
/* 给th td添加样式设置 */
table tr th,
table tr td {
border: 1px solid #444444;
padding: 5px;
font-weight: bolder;
}
/* 标题样式 */
table caption {
font-size: 2rem;
font-weight: bolder;
margin-bottom: 15px;
}
/* 设置表格圆角样式 */
table thead tr:first-child th:first-child {
border-top-left-radius: 80px;
}
table thead tr:first-child th:last-child {
border-top-right-radius: 80px;
}
table tfoot tr:last-child td:first-child {
border-bottom-left-radius: 80px;
}
table tfoot tr:last-child td:last-child {
border-bottom-right-radius: 80px;
}
/* 给表头和表底添加颜色样式 */
table thead th,
table tfoot td {
background-color: rgb(81, 136, 238);
}
table tbody>tr:nth-of-type(2)>td:nth-of-type(1) {
background-color: rgb(233, 240, 144);
}
table tbody>tr:nth-last-of-type(5)>td:nth-of-type(1) {
background-color: rgb(233, 240, 144);
}
/* 通过css方式向页面添加元素，叫：伪元素 */
table:before {
content: '';
width: 1000px;
height: 625px;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* 设置伪元素的背景 */
background-image: url("index.jpg");
background-size: cover;
opacity: 0.3;
overflow: inherit;
}点击 "运行实例" 按钮查看在线实例
总结
运用到了border-spacing和border-collapse，想要合并单一的表格也可以，好多的方块合并单一的表格，就是借助到border-spacing 或者border-collapse。图像不居中的事没解决好呢，所以暂时先交上作业。对了，表格里面的备注一行写了，沉迷学习无法自拔，研究编程无法提高，好像说是我哈哈。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
