收藏
批改状态：合格
老师批语：不必想为什么, 规则就这样, 记住它, 会用它就可以
老师，这个表格我在网上查了，说table的border-collapse:collapse与 border-radius不兼容。可是想了很久以后，不知道为什么，我表格有个列的左边框为什么不显示呢？
<!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="zy.css">
<title>2019最新课程表</title>
<style>
table {
/* border: 1px solid #000; */
/* border-collapse: collapse; */
width: 800px;
margin: 2px auto;
border-spacing: 0;
/* box-shadow: 2px 2px 2px #888888; */
}
th,
td {
/* border: 1px solid #000; */
text-align: center;
padding: 10px;
border-left: 1px solid #000;
border-top: 1px solid #000;
}
th {
border-top: none;
}
table caption {
font-size: 1.3rem;
font-weight: bolder;
}
table thead>tr:first-of-type {
background: lightcoral;
}
table tbody>tr:first-of-type>td:first-of-type {
background: lightgreen;
}
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
background: lightpink;
}
table tfoot>tr:last-of-type {
background: lightskyblue;
}
table th:first-of-type,
table td:first-of-type {
border-left: none;
}
table th:first-of-type {
border-radius: 10px 0 0 0;
}
table th:last-of-type {
border-radius: 0 10px 0 0;
}
table tr:last-of-type td:first-of-type {
border-radius: 0 0 0 10px;
}
table tr:last-of-type td:last-of-type {
border-radius: 0 0 10px 0;
}
</style>
</head>
<body>
<table>
<caption>
<h2>课程表</h2>
</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-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>语文</td>
<td>数学</td>
<td>英语</td>
<td>历史</td>
<td>体育</td>
</tr>
<tr>
<td rowspan="2">下午<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>
<tfoot>
<tr>
<td>备注：</td>
<td colspan="5">打扫卫生后记得将扫帚归位！</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
