html5 table的表头固定的HTML代码

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号
posted @ 2018-08-15 09:23  不刷牙的大虫子  阅读(5840)  评论(0)  编辑  收藏  举报