利用css3 translate完美实现表头固定效果


Posted in HTML / CSS onFebruary 28, 2017

前言

前段时间在工作中正好需要这个功能,但是找了很多都不能完美的实现,所以在此就自己做了一个固定表头的方法,主要用到了css3中的translate和一小段js代码,下面来一起看看吧。

效果如下:

利用css3 translate完美实现表头固定效果

感觉是不是很和谐,而且代码也少,不足的是IE9以下不支持translate属性,但现在也没多少要考滤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;
    border-top: 1px solid #ccc;
    text-align: center;
}
.box table thead {
    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>

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>

总结

好了,以上就是这篇文章的全部内容了,代码是不是真的很少呢,还在等什么?快点感受一下吧。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 HTML / CSS
纯CSS3实现Material Design效果
Mar 09 #HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 #HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 #HTML / CSS
手把手教你用纯css3实现轮播图效果实例
May 04 #HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 #HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 #HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 #HTML / CSS
You might like
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
simplehtmldom Doc api帮助文档
2012/03/26 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
JS解析XML的实现代码
2009/11/12 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
python中的插入排序的简单用法
2021/01/19 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
毕业生求职推荐信
2013/11/04 职场文书
标准毕业生自荐信范文
2013/11/04 职场文书
初级会计求职信范文
2014/02/15 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
考试作弊检讨书
2014/10/21 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
护士2015年终工作总结
2015/04/29 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
Python中threading库实现线程锁与释放锁
2021/05/17 Python