利用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制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
HTML常用标签超详细整理
Mar 19 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
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
php实现用户登陆简单实例
2017/04/04 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
Js基础学习资料
2010/11/23 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
分享Python字符串关键点
2015/12/13 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
拾金不昧表扬信范文
2014/01/11 职场文书
新闻报道策划方案
2014/06/11 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书