利用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绘制百度的小度熊
Oct 29 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Javascript的一种模块模式
2010/09/08 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
浅析return false的正确使用
2013/11/04 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python队列queue模块详解
2018/04/27 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
如何安装ruby on rails
2014/02/09 面试题
股份合作协议书范本
2014/04/14 职场文书
动物科学专业求职信
2014/07/27 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
2016年教师新年寄语
2015/08/18 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers