固定表头

本文介绍了一种使用HTML和CSS实现的表头锁定效果,使得在表格内容滚动时,表头始终可见。通过设置表格thead部分为固定布局并给予背景色,tbody部分为可滚动的块级元素,确保了在大量数据展示时用户体验的优化。
<!DOCTYPE html> <!-- 不加此标签,IE不生效 -->
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <title>表头锁定</title>
</head>
<style>
    .myTable tbody {
        display: block;
        height: 250px;
        width: 900px;
        overflow-y: scroll;
        text-align: center;
    }

    .myTable thead,
    tbody tr {
        display: table;
        width: 900px;
        table-layout: fixed;
    }

    .myTable thead {
        background: #E4E8F3;
        color: black;
    }

    .myTable thead tr th {
        text-align: center;
    }
</style>

<body>
    <div id="div_1" style="padding: 1px 15px 15px 15px;margin-top: 50px; ">
        <table class="myTable" id="nav_tab" border="1">
            <thead>
                <tr>
                    <th>头字段1</th>
                    <th>头字段2</th>
                    <th>头字段3</th>
                    <th>头字段4</th>
                    <th>头字段5</th>
            </thead>
            <tbody id="nav_tab_tbd">
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>88888</td>
                    <td>88888</td>
                    <td>88888</td>
                    <td>88888</td>
                    <td>88888</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                    <td>99999</td>
                </tr>
                <tr>
                    <td>22222</td>
                    <td>22222</td>
                    <td>22222</td>
                    <td>22222</td>
                    <td>22222</td>
                </tr>
                <tr>
                    <td>22222</td>
                    <td>22222</td>
                    <td>22222</td>
                    <td>22222</td>
                    <td>22222</td>
                </tr>
            </tbody>

        </table>
    </div>
</body>
</html>
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值