固定表头

最新推荐文章于 2025-11-06 17:10:25 发布

原创最新推荐文章于 2025-11-06 17:10:25 发布 · 373 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种使用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>