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">
<title>Document</title>
<style>
table {
width: 90%;
background: #ccc;
margin: 10px auto;
border-collapse: collapse;
}
th,td {
height: 25px;
line-height: 25px;
text-align: center;
border: 1px solid #ccc;
}
th {
background: #eee;
font-weight: normal;
}
tr {
background: #fff;
}
tr:hover {
background: #bfa;
}
</style>
</head>
<body>
<table border="1" width=‘50%‘ align="center">
<!--
可以将一个表格分成三个部分：
头部 thead
主体 tbody
底部 tfoot
th 表示头部的单元格
-->
<thead>
<tr>
<th colspan="9">学校登记接种情况（由学校填写）</th>
<th colspan="6">接种单位实际接种情况（由接种单位填写）</th>
</tr>
<tr>
<th rowspan="2">班级</th>
<th rowspan="2">姓名</th>
<th rowspan="2">性别</th>
<th rowspan="2">出生日期</th>
<th rowspan="2">免疫史依据</th>
<th rowspan="2">既往有无流感疫苗接种史</th>
<th colspan="3">选择接种流感疫苗种类</th>
<th rowspan="2">仅接种1剂次的人接种日期</th>
<th colspan="2">需接种2剂次的人接种日期</th>
<th colspan="3">接种疫苗种类</th>
</tr>
<tr>
<th>三价裂解疫苗</th>
<th>四价裂解疫苗</th>
<th>三价冻干鼻喷减毒活疫苗</th>
<th>第一针</th>
<th>第二针</th>
<th>三价裂解疫苗</th>
<th>四价裂解疫苗</th>
<th>三价冻干鼻喷减毒活疫苗</th>
</tr>
</thead>
<tbody>
<tr>
<!-- 左 -->
<!-- 班级 -->
<td>一年级一班</td>
<!-- 姓名 -->
<td>XXX</td>
<!-- 性别 -->
<td>男</td>
<!-- 出生日期 -->
<td>2013.01.01</td>
<!-- 免疫史依据 -->
<td>接种证</td>
<!-- 既往有无流感疫苗接种史 -->
<td>有</td>
<!-- 三价裂解疫苗 -->
<td></td>
<!-- 四价裂解疫苗 -->
<td>√</td>
<!-- 三价冻干鼻喷减毒活疫苗 -->
<td></td>
<!-- 右 -->
<!-- 仅接种1剂次的人接种日期 -->
<td>2020.09.10</td>
<!-- 第一针 -->
<td></td>
<!-- 第二针 -->
<td></td>
<!-- 三价裂解疫苗 -->
<td></td>
<!-- 四价裂解疫苗 -->
<td>√</td>
<!-- 三价冻干鼻喷减毒活疫苗 -->
<td></td>
</tr>
<tr>
<!-- 左 -->
<!-- 班级 -->
<td></td>
<!-- 姓名 -->
<td></td>
<!-- 性别 -->
<td></td>
<!-- 出生日期 -->
<td></td>
<!-- 免疫史依据 -->
<td></td>
<!-- 既往有无流感疫苗接种史 -->
<td></td>
<!-- 三价裂解疫苗 -->
<td></td>
<!-- 四价裂解疫苗 -->
<td></td>
<!-- 三价冻干鼻喷减毒活疫苗 -->
<td></td>
<!-- 右 -->
<!-- 仅接种1剂次的人接种日期 -->
<td></td>
<!-- 第一针 -->
<td></td>
<!-- 第二针 -->
<td></td>
<!-- 三价裂解疫苗 -->
<td></td>
<!-- 四价裂解疫苗 -->
<td></td>
<!-- 三价冻干鼻喷减毒活疫苗 -->
<td></td>
</tr>
</tbody>
</table>
</body>
</html>