其他分享
首页 > 其他分享> > 一个简单的css表格样式

一个简单的css表格样式

作者:互联网

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>

标签:接种,冻干,表格,裂解,样式,三价,疫苗,background,css
来源: https://www.cnblogs.com/uaoin/p/13569328.html