原生表格固定头部（右侧顶部固定功能）

最近项目用的是iview开发的，最初一开始是被iview的表格丰富的功能吸引了，但是由于iveiw还不是很稳定且一直在升级，做到后来要上线了，因为真实数据量比较大，用iveiw一个页面渲染时间长达22s之多，这样的效果是显然不能忍受的，然后直接用vue,不到2s页面。然后决定放弃iview了，但是还是想要iview中的表格左侧，头部滚动固定的功能，然后就打算自己手写。
一开始在网上搜了一下固定头尾。这种也满足不了需求，于是打算手写，发现也没有想象中的那么复杂。废话不多说，直接贴代码。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>scrollTable</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<style>
    .scroll-table{overflow-x: scroll;}
    table {border-collapse:collapse;}
    th,td{border: none;white-space: nowrap;}
    th{background-color: aqua;}
    td:first-child{background-color: cadetblue;}
    .scroll-table {border: 1px solid #ddd;max-height: 400px;}
    .scroll-table th,.scroll-table td{position: relative;}
    .scroll-table th{position: relative;z-index:100;top:-1px;left:0;}
    .scroll-table th.fixed-th-both{z-index:200;}
    .fixed-td-left{position: relative;z-index:10;bottom: 0;left:0;}
    .scroll-table .td-border{position: absolute;top:0;left:0;width:100%;height:100%;border:1px solid #ddd;}
</style>
<div class=" scroll-table" style="width:400px;height:120px;">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th rowspan="2" class="fixed-th-both">表头1</th>
            <th rowspan="2">表头2</th>
            <th rowspan="2">表头3</th>
            <th colspan="5">表头4</th>
            <th rowspan="2">表头5</th>
            <th colspan="5">表头6</th>
        </tr>
        <tr>
            <th>表头7</th>
            <th>表头8</th>
            <th>表头9</th>
            <th>表头10</th>
            <th>表头11</th>
            <th>表头12</th>
            <th>表头13</th>
            <th>表头14</th>
            <th>表头15</th>
            <th>表头16</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>第一栏</td>
                <td>999999999</td>
                <td>1111</td>
                <td>88888</td>
                <td>22222222222222222222</td>
                <td>1111</td>
                <td>1111</td>
                <td>999999999</td>
                <td>1111</td>
                <td>9999</td>
                <td>88888</td>
                <td>22222222222222222222</td>
                <td>1111</td>
                <td>8777</td>
            </tr>
            <tr>
                <td>第二栏</td>
                <td>1111</td>
                <td>999999999</td>
                <td>1111</td>
                <td>88888</td>
                <td>22222222222222222222</td>
                <td>1111</td>
                <td>1111</td>
                <td>999999999</td>
                <td>1111</td>
                <td>88888</td>
                <td>22222222222222222222</td>
                <td>1111</td>
                <td>8777</td>
            </tr>
            ...
            ...
        </tbody>
    </table>
    <script>
        $('.scroll-table tbody tr').find('td:first-child').addClass('fixed-td-left');
        $('.scroll-table th').addClass('fixed-td-top');
        $('.scroll-table').scroll(function(){
            var _this = $(this);
            _this.find('.fixed-td-top').css('top',this.scrollTop-1);
            _this.find('.fixed-td-left').css('left',this.scrollLeft);
            _this.find('.fixed-th-both').css('left',this.scrollLeft);
        });
    </script>
</div>
</body>
</html>

效果图

把td，th都设定为相对定位，滚定时改变定位，为什么要设置相对定位不设置绝对定位呢，应为如果th设置了绝对定位，那么表格单元格宽度就不能根据表头自适应了，表头和表格宽度分配不一致。
当单元格定位起来时，border并不会跟随内容滚动，所以把我这放了个div来做border
需要注意的是左上角的单元格不论是左右滚动还是上下滚动都需要固定在左上方
查看demo

最后编辑于：2017.12.09 02:39:00

原生表格固定头部（右侧顶部固定功能）

推荐阅读更多精彩内容