1、第一種方法
通過屬性overflow屬性控制滾動，主要是寫一個div設置固定高度，內容超出高度出現滾動條，overlay主要控制滾動條不佔位置。注意：此寫法，瀏覽器兼容好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
th {
border: 1px solid #eee;
color: #333;
font-size: 16px;
line-height: 36px;
background: #e5e5e5;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
font-size: 14px;
line-height: 32px;
height: 32px;
}
.table-head {
color: red;
height: 36px;
}
.table-body {
width: 100%;
max-height: 200px;
overflow: overlay;
}
.table-head table,
.table-body table {
width: 100%;
}
</style>
</head>
<body>
<div style="padding: 20px;">
<div class="table-head">
<table>
<thead>
<th >測試111</th>
<th >測試111</th>
<th >測試111</th
</thead>
</table>
</div>
<div class="table-body">
<table>
<tbody id="tbody">
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
2、第二種方法
通過 position: sticky屬性控制滾動，當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。注意：低版本的瀏覽器不兼容此寫法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
th {
border: 1px solid #eee;
color: #333;
font-size: 16px;
line-height: 36px;
background: #e5e5e5;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
font-size: 14px;
line-height: 32px;
height: 32px;
}
.float-title{
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<div style="padding: 20px;">
<table>
<thead class="float-title">
<th>測試111</th>
<th>測試111</th>
<th>測試111</th
</thead>
<tbody id="tbody">
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>555</td>
<td>555</td>
<td>555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>