利用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实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 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
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP7 弃用功能
2021/03/09 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
周年庆促销方案
2014/03/15 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
教师继续教育反思周记
2015/06/25 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL