table 表头固定

最新推荐文章于 2024-08-21 14:23:14 发布

黄祚敏

最新推荐文章于 2024-08-21 14:23:14 发布

阅读量2k

点赞数

分类专栏： js 文章标签： table 表头固定

本文链接：https://blog.csdn.net/github_38186390/article/details/101531162

版权

js 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

一。table 表头固定说明。我们将表头和表内容分成两个表格就可以解决该问题。

二。代码。

css代码：里面定死的宽高只是为啦方便看效果，实际中需要使用js计算出来。

* {
            box-sizing: border-box;
        }
        .table {
            border: 1px solid #efefef;
            width: 800px;
            overflow: hidden;
        }

        .table .table-header, .table .table-body {
            text-align: left;
            width: 800px;
            overflow: hidden;
        }

        .table .table-header table {
            width: 1017px;
            table-layout: fixed;
            border-collapse: separate;
        }
        .table .table-body table {
            width: 1000px;
            table-layout: fixed;
            border-collapse: separate;
        }
        .table .table-header table tr th, .table .table-body table tr td {
            height: 44px;
            padding: 10px;
            border-bottom: 1px solid #ebeef5;
        }

        .table .table-header th + th, .table .table-body td + td {
            border-left: 1px solid #ebeef5;
        }

        .scroll {
            overflow: auto !important;
        }

html代码：colgroup 和 col 标签主要用于控制每列的宽度。name 为 scroll 该列主要用于预留滚动条的高度。

table 属性：border：表格边框，设置为0（无边框）。cellspacing：单元格空虚，设置为0（无空隙）。cellpadding：单元格之间的padding，设置为0.。

<div class="table">
    <div class="table-header" id="header">
        <table cellspacing="0" cellpadding="0" border="0">
            <colgroup>
                <col name="a" width="100"/>
                <col name="b" width="400"/>
                <col name="c" width="200"/>
                <col name="d" width="300"/>
                <col name="scroll" width="17"/>
            </colgroup>
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th></th>
            </tr>
            </thead>
        </table>
    </div>
    <div class="table-body scroll" id="body" style="height: 200px;">
        <table cellspacing="0" cellpadding="0" border="0">
            <colgroup>
                <col name="a" width="100"/>
                <col name="b" width="400"/>
                <col name="c" width="200"/>
                <col name="d" width="300"/>
            </colgroup>
            <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>19</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>20</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>4</td>
                <td>张三</td>
                <td>18</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>5</td>
                <td>李四</td>
                <td>19</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>6</td>
                <td>王五</td>
                <td>20</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>7</td>
                <td>张三</td>
                <td>18</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>8</td>
                <td>李四</td>
                <td>19</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>9</td>
                <td>王五</td>
                <td>20</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>10</td>
                <td>张三</td>
                <td>18</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>11</td>
                <td>李四</td>
                <td>19</td>
                <td>保存</td>
            </tr>
            <tr>
                <td>12</td>
                <td>王五</td>
                <td>20</td>
                <td>保存</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

js代码：该代码主要用于table-body 横向滚动时,table-header 也跟着滚动。

<script type="text/javascript">
    document.getElementById('body').addEventListener('scroll', function(e) {
        document.getElementById('header').scrollLeft = e.target.scrollLeft
    })
</script>