<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>固定表头</title>
<style type="text/css">
#table-container{
border:1px solid black;
width:316px;
} table{width:300px;} .table-header{
padding-left:10px;
color:white;
background-color:grey;
} .table-body{
height:200px;
overflow-y:scroll;
overflow-x:hidden;
} .table-body td{padding-left:15px;}
</style>
</head>
<body>
<div id="table-container">
<div class="table-header">
<table>
<colgroup>
<col style="width:80px;"/>
<col style="width:80px;"/>
<col style="width:80px;"/>
</colgroup>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</table>
</div>
<div class="table-body">
<table>
<colgroup>
<col style="width:80px;"/>
<col style="width:80px;"/>
<col style="width:80px;"/>
</colgroup> <tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
</div>
</div>
<body>
</html>
有几个要点：
<HTML>部分
1.一共有三个div.最外面一个div，包裹住整张表。里面的两个div分别裹住表头和表内容。
2.注意,表格内容也都需要单独的table。表格内容应该是div-table-tr-td.
--------------------------------------------------------------
<CSS>样式部分
3.用到了<colgroup>标签。该标签只能用于table中。方便批量设定列宽;
4.表格内容table-body的div需要设置 (a) 高度; (b) “overflow-y:scroll” 让滚动条出现；