table的表头固定的HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>固定表头可以纵向滚动的html表格</title>
    <style type="text/css">
    #table_div{
        width:80%;
        margin-left: 50px;
    }
    #table_header{
        background-color: #7fffd4;
    }
    .col1,.col2,.col3{
        width: 20%
    }
    .col4{
        width:40%;
    }
    </style>
</head>
<body>
    <div id="table_div">
        <table width="100%">
            <tr id="table_header">
                <th class="col1">学号</th>
                <th class="col2">姓名</th>
                <th class="col3">年级</th>
                <th class="col4">家庭住址</th>
            </tr>    
        </table>
        <div style="overflow:auto;height:100px">
            <table width="100%">
                <tr>
                    <td class="col1">11111111</td>
                    <td class="col2">张三</td>
                    <td class="col3">2013级</td>
                    <td class="col4">吉林省长春市前进大街2699号</td>
                </tr>
                <tr>
                    <td class="col1">11111111</td>
                    <td class="col2">张三</td>
                    <td class="col3">2013级</td>
                    <td class="col4">吉林省长春市前进大街2699号</td>
                </tr>
                <tr>
                    <td class="col1">11111111</td>
                    <td class="col2">张三</td>
                    <td class="col3">2013级</td>
                    <td class="col4">吉林省长春市前进大街2699号</td>
                </tr>
                <tr>
                    <td class="col1">11111111</td>
                    <td class="col2">张三</td>
                    <td class="col3">2013级</td>
                    <td class="col4">吉林省长春市前进大街2699号</td>
                </tr>
                <tr>
                    <td class="col1">11111111</td>
                    <td class="col2">张三</td>
                    <td class="col3">2013级</td>
                    <td class="col4">吉林省长春市前进大街2699号</td>
                </tr>
                <tr>
                    <td class="col1">11111111</td>
                    <td class="col2">张三</td>
                    <td class="col3">2013级</td>
                    <td class="col4">吉林省长春市前进大街2699号</td>
                </tr>
                <tr>
                    <td class="col1">11111111</td>
                    <td class="col2">张三</td>
                    <td class="col3">2013级</td>
                    <td class="col4">吉林省长春市前进大街2699号</td>
                </tr>
                <tr>
                    <td class="col1">11111111</td>
                    <td class="col2">张三</td>
                    <td class="col3">2013级</td>
                    <td class="col4">吉林省长春市前进大街2699号</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

效果如下图所示，其中最主要的代码是style="overflow:auto;height:100px"

学号

姓名

年级

家庭住址

11111111

张三

2013级

吉林省长春市前进大街2699号

11111111

张三

2013级

吉林省长春市前进大街2699号

11111111

张三

2013级

吉林省长春市前进大街2699号

11111111

张三

2013级

吉林省长春市前进大街2699号

11111111

张三

2013级

吉林省长春市前进大街2699号

11111111

张三

2013级

吉林省长春市前进大街2699号

11111111

张三

2013级

吉林省长春市前进大街2699号

11111111

张三

2013级

吉林省长春市前进大街2699号