css3 translate 完美诠释表头固定

0

效果如下:

图片描述

感觉是不是很和谐,而且代码也少,不足的是IE9以下不支持transform属性,但现在也没多少要考滤IE9以下的兼容了吧,做前端老兼顾低版本的浏览器难免会让自己束手束脚。。。。

下面来看下代码吧

HTML结构

<div class="box">
    <table>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <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>
            </tr>
        </thead>
        <tbody>
            <script>
            var tr = '';
            for(var i=0; i<15; i++) {
                tr += '<tr>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                    </tr>';
            }
            document.write(tr);
            </script>                
        </tbody>
    </table>
</div>

CSS样式

<style>
*{margin: 0;padding: 0;list-style: none;}
.box{width: 300px;height: 300px;margin: 50px auto 0;overflow: auto;}
.box table{width: 100%;border-collapse: collapse;border-right: 1px solid #ccc;text-align: center;}
.box table thead th{background-color: #ccc;}
.box table th, .box table td{padding: 8px 10px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;white-space: nowrap;}
</style>

提示:如果是加框表格,建议使用box-shadow: inset 1px 1px 0 0 #ccc;

JS脚本

<script>
// 原生写法
window.onload = function() {
    var $ = document.querySelector.bind(document);
    var boxEle = $('.box');
    boxEle.addEventListener('scroll', function(e) {
        this.querySelector('thead').style.transform = 'translate(0, '+this.scrollTop+'px)';
    });
}
</script>

可恶的是IE不支持thead的transform设置,但还是被小可找到了解决的方法,那就是给th设置transform属性

// 需要引用jquery
var scrollTop;
$('.box').scroll(function() {
    scrollTop = this.scrollTop;
    $(this).find('thead tr th').css({
        '-webkit-transform': 'translate(0, '+scrollTop+'px)',
        '-ms-transform': 'translate(0, '+scrollTop+'px)',
        'transform': 'translate(0, '+scrollTop+'px)'
    });
});

另外说明一点,这里的translate(x, y); 可以直接使用translateY(y);

目前来说这个效果在chrome上是最好的,但在遨游,火狐,IE效果就差强人意,有点闪眼,建议做个延迟处理,代码如下

var scrollTop, timeoutFlag;
$('.box').scroll(function() {
    $(this).find('thead tr th').removeAttr('style');
    if(timeoutFlag) clearTimeout(timeoutFlag);
    timeoutFlag = setTimeout(function() {
        scrollTop = this.scrollTop;
        $(this).find('thead tr th').css({
            '-webkit-transform': 'translateY('+scrollTop+'px)',
            '-ms-transform': 'translateY('+scrollTop+'px)',
            'transform': 'translateY('+scrollTop+'px)'
        });
    }.bind(this), 300);
});

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表头固定</title>
    <style>
    *{margin: 0;padding: 0;list-style: none;}
    .box{width: 300px;height: 300px;margin: 50px auto 0;overflow: auto;}
    .box table{width: 100%;border-collapse: collapse;border-right: 1px solid #ccc;text-align: center;}
    .box table thead th{background-color: #ccc;}
    .box table th, .box table td{padding: 8px 10px;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;white-space: nowrap;}
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div class="box">
    <table>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <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>
            </tr>
        </thead>
        <tbody>
            <script>
            var tr = '';
            for(var i=0; i<15; i++) {
                tr += '<tr>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                        <td>'+i+'</td>\
                    </tr>';
            }
            document.write(tr);
            </script>                
        </tbody>
    </table>

    <script>
    /*window.onload = function() {
        var $ = document.querySelector.bind(document);
        var boxEle = $('.box');
        boxEle.addEventListener('scroll', function(e) {
            this.querySelector('thead').style.transform = 'translate(0, '+this.scrollTop+'px)';
        });
    }*/
    var scrollTop;
    $('.box').scroll(function() {
        scrollTop = this.scrollTop;
        $(this).find('thead tr th').css({
            '-webkit-transform': 'translate(0, '+scrollTop+'px)',
            '-ms-transform': 'translate(0, '+scrollTop+'px)',
            'transform': 'translate(0, '+scrollTop+'px)'
        });
    });
    
    /*var scrollTop, timeoutFlag;
    $('.box').scroll(function() {
        $(this).find('thead tr th').removeAttr('style');
        if(timeoutFlag) clearTimeout(timeoutFlag);
        timeoutFlag = setTimeout(function() {
            scrollTop = this.scrollTop;
            $(this).find('thead tr th').css({
                '-webkit-transform': 'translateY('+scrollTop+'px)',
                '-ms-transform': 'translateY('+scrollTop+'px)',
                'transform': 'translateY('+scrollTop+'px)'
            });
        }.bind(this), 300);
    });*/
    </script>
</div>
</body>
</html>

代码是不是真的很少呢,还在等什么?快点感受一下吧。。

如果喜欢就推荐吧,不要问为什么?直接推荐。。

附加本电脑的IE9效果
图片描述

你可能感兴趣的

13 条评论
蓠人 · 2017年05月16日

你好,我这边在IE11中怎么不起作用?

回复

0

给th加translateY试试

zhangqh 作者 · 2017年05月16日
0

@zhangqh 还是不行

蓠人 · 2017年05月16日
0

看看文档模式、用户代理对不对,,不行的话,我也没撤了,,我这边是可以的,,

zhangqh 作者 · 2017年05月16日
gaogao高 · 2017年10月24日

ie下面都不行 不止是ie11不行

回复

0

IE9以上都测试了,,不管你们的行不行,我的肯定是行的,可以刷新下刚上传的IE9贴图

zhangqh 作者 · 2017年10月24日
0

这是为什么呀?? 难道这个东西也看人品

gaogao高 · 2017年10月24日
凌雁飞鸿 · 2月22日

你好,如果下面表格中td设置position:relative的话平移后的表头会被遮住,这个问题有好的解决方法吗?

回复

0

套个div吧
<td>

<div style="position: relative;"></div>

</td>

zhangqh 作者 · 2月22日
狂爵 · 7月12日

你好,thead 表头的边框会被覆盖问题怎么解决。谢谢!

回复

载入中...