html5 table的表头固定的HTML代码

最新推荐文章于 2023-09-27 18:39:30 发布

dengzhi9024

最新推荐文章于 2023-09-27 18:39:30 发布

阅读量582

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/killclock048/p/9479484.html

本文介绍了一种实现HTML表格固定表头并允许纵向滚动的方法。通过将表头和表格主体分离，并对包含表格主体的div应用overflow:auto样式，实现了表头固定的效果。此方法适用于展示大量数据的同时保持表头可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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号