<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="icon-font/iconfont.js"></script>
</head>
<body>
<style>
@media (max-width:300px) {
html {
font-size: 12px;
}
}
@media (min-width:301px) and (max-width:600px) {
:root {
font-size: 14px;
}
}
@media (min-width:601px) {
:root {
font-size: 16px;
}
}
body {
margin: 0;
padding: 0;
}
table {
width: 90vw;
border-collapse: collapse;
border-spacing: 0;
margin: 5vw;
}
table caption {
font-size: 2rem;
font-weight: bold;
margin-bottom: 10px;
}
table thead tr {
background-color: coral;
}
table tr th {
font-size: 1.2rem;
line-height: 3rem;
border: 1px solid rgb(151, 79, 7);
text-align: center;
}
table tr:nth-of-type(2n) {
background-color: blanchedalmond;
}
*[rowspan] {
background-color: #fff;
}
table tbody tr:hover {
background-color: burlywood;
cursor: pointer;
transition-duration: 0.6s;
}
.icon {
width: 1.2em;
height: 1.2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<table>
<caption>
课程表
</caption>
<thead>
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4">上午</th>
<th>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-huiyuan"></use>
</svg>数学
</th>
<th>数学</th>
<th>数学</th>
<th>数学</th>
<th>数学</th>
</tr>
<tr>
<th><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-biji"></use>
</svg>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
</tr>
<tr>
<th><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shoucang"></use>
</svg>英语</th>
<th>英语</th>
<th>英语</th>
<th>英语</th>
<th>英语</th>
</tr>
<tr>
<th><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiaoxi"></use>
</svg>体育</th>
<th>体育</th>
<th>体育</th>
<th>体育</th>
<th>体育</th>
</tr>
<tr>
<th colspan="6">中午休息</th>
</tr>
<tr>
<th rowspan="3">下午</th>
<th><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ziliao"></use>
</svg>音乐</th>
<th>音乐</th>
<th>音乐</th>
<th>音乐</th>
<th>音乐</th>
</tr>
<tr>
<th><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xihuan"></use>
</svg>美术</th>
<th>美术</th>
<th>美术</th>
<th>美术</th>
<th>美术</th>
</tr>
<tr>
<th><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-huiyuan"></use>
</svg>生理</th>
<th>生理</th>
<th>生理</th>
<th>生理</th>
<th>生理</th>
</tr>
<tr>
<th>执勤</th>
<th colspan="5">各小组安排</th>
</tr>
</tbody>
</table>
</body>
</html>