<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML table表头固定</title>
<style>
.table{
border-collapse:collapse;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
text-align: center;
}
.table th {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.table td {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.table tbody {
display: block;
height: 100px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; // 为了滚动顺畅
}
.table thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.table tbody::-webkit-scrollbar {
display: none; // 隐藏滚动条，不需要可取消
}
.table thead th {
background: #ccc;
}
</style>
</head>
<body>
<table class='table'>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生年月</th>
<th>手机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-09-09</td>
<td>12312341234</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
<td>1992-12-08</td>
<td>12312341234</td>
<td>阿里巴巴与四十大盗</td>
</tr>
<tr>
<td>王五</td>
<td>18</td>
<td>2000-05-01</td>
<td>12312341234</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>张三二</td>
<td>18</td>
<td>1994-01-25</td>
<td>12312341234</td>
<td>浏阳河就业</td>
</tr>
<tr>
<td>李四二</td>
<td>18</td>
<td>1990-9-9</td>
<td>12312341234</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>王五二</td>
<td>18</td>
<td>1990-9-9</td>
<td>12312341234</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>12312341234</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>李大四</td>
<td>18</td>
<td>1990-9-9</td>
<td>12312341234</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>王大五</td>
<td>18</td>
<td>1990-9-9</td>
<td>12312341234</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</body>
</html>
