HTML 表格滚动锁定表头，实现固定行列

sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。fixed - 表格的总宽度决定于表格width

文章共3,937字 · 阅读需要大约14分钟

一键AI生成摘要，助你高效阅读

问答

东方新丁

1941人浏览 · 2023-12-11 16:39:02

东方新丁 · 2023-12-11 16:39:02 发布

HTML 表格滚动锁定表头，实现固定行列_html表格表头固定不动-CSDN博客

一、实现效果

二、主要的2个属性

table-layout : fixed  
position : sticky

1、table-layout
table-layout属性有两种特定值：

auto（预设值）-表格的总宽度决定每一个储存格（cell）的最大值
fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义
为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。

table {
    table-layout: fixed;
    width: 100%;
}

2、Position
大家对position 的作用应该不陌生，而固定表格则需要使用到 position : sticky 的设定

sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置

要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！

thead tr th {
    position:sticky;
    top:0;
}

三、案例代码
这个案例主要实现了表格在横向滚动或者纵向滚动时可以锁定表格的头部。

主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table {
            border-collapse: collapse;
        }

        .sticky-table {
            overflow: auto;
            height: 400px; /* 设置固定高度 */
            width: 1000px;
            position: absolute
        }

        .sticky-table td, .sticky-table th {
            /* 设置td,th宽度高度 */
            border: 1px solid #c7d8ee;
            width: 150px;
            min-width: 150px;
            height: 30px;
            padding: 5px;
        }

        .sticky-table th {
            position: sticky;
            top: 0; /* 首行永远固定在头部  */
            background-color: #eaf4ff; /*设置表头背景色*/
        }

         .sticky-table td:first-child, .sticky-table th:first-child {
            position: sticky;
            left: 0; /* 首列永远固定在左侧 */
            z-index: 1;
            background-color: #eaf4ff;
        } 

        .sticky-table th:first-child {
            z-index: 2; /*表头的首列要在上面*/
        }

        .sticky-table th > div {
            width: 100%;
            white-space: normal;   /*允许在单元格内正常换行。*/
            word-wrap: break-word; /*当单元格内的单词太长时，允许将单词拆分成多个行。*/
            word-break: break-all; /*允许在单元格内的单词内进行换行，而不仅限于字母间的换行。*/
        }

        /*.sticky-table table {
            table-layout: fixed;  布局为固定布局。这意味着表格的列宽和行高将保持不变
        }*/

    </style>
</head>
<body style="padding: 0px;margin: 0px;">
<div class="sticky-table">
    <table>
        <thead>
        <tr>
            <th></th>
            <th colspan="8">个人素养</th>
            <th colspan="4">社群素养</th>
            <th colspan="8">职业素养</th>
        </tr>
        <tr>
            <th></th>
            <th colspan="2">身体素质</th>
            <th colspan="2">艺术修养</th>
            <th colspan="2">心理素质</th>
            <th colspan="2">道德修为</th>
            <th colspan="2">爱国与责任意识</th>
            <th colspan="2">法律与环保意识</th>
            <th colspan="6">基本职业素质</th>
            <th colspan="2">企业文化与创新精神</th>
        </tr>
        <tr>
            <th>姓名</th>
            <th><div>基本身体情况</div></th><th><div>体育特长能力</div></th>
            <th><div>艺术审美</div></th><th><div>爱好特长</div></th>
            <th><div>心理健康</div></th><th><div>自我调节</div></th>
            <th><div>自信自强、诚实守信</div></th><th><div>文明素养、个人行为规范</div></th>
            <th><div>爱国意识</div></th><th><div>责任心及服务意识</div></th>
            <th><div>法律意识</div></th><th><div>环保意识</div></th>
            <th><div>语言表达能力及口语特长</div></th><th><div>自我管理，自我激励</div></th>
            <th><div>发展规划能力</div></th><th><div>信息技术能力</div></th>
            <th><div>沟通能力</div></th><th><div>团队合作能力</div></th>
            <th><div>企业文化学习</div></th><th><div>创新能力、解决问题能力</div></th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
           <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
           <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td>
            <td>优秀</td><td>优秀</td><td>优秀</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>