css3 translate 完美诠释表头固定

Eirunye 发布于2019-08-20 14:33 / 1154人阅读

摘要：效果如下感觉是不是很和谐，而且代码也少，不足的是以下不支持属性，但现在也没多少要考滤以下的兼容了吧，做前端老兼顾低版本的浏览器难免会让自己束手束脚。。。。如果喜欢就推荐吧，不要问为什么直接推荐。。附加本电脑的效果

效果如下：

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

下面来看下代码吧

HTML结构

CSS样式

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

JS脚本

可恶的是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);
});

完整代码

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

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

附加本电脑的IE9效果

云服务器 GPU云服务器固定表头表格固定表头固定表头html asp 表头固定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81736.html

vue移动端复杂表格表头，固定表头与固定第一列

摘要：固定的表格头部与第一列的宽高行高都是通过获取真实的表格的宽高来设定的。通过展示的表格的上下滚动从而带动固定在第一列的向上滚动，向左右滚动带动覆盖上表头的的左右滚动。 showImg(https://segmentfault.com/img/remote/1460000015798687); 前言最近做移动端的h5项目，要做一个可配置表头的复杂表格，网上找了很久也没什么好方法，结合网上...

sarva 2019-08-23 10:26 评论0 收藏0
CSS水平或垂直居中技巧

摘要：适用情景单对象水平居中原理将子元素设置块级表格，再设置水平居中。结语有些是水平居中，有些是垂直居中，将它们某两个合在一起就能实现水平和垂直均居中。前言 css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（ps：特想找个地洞钻进去）。。。时隔两年，对于这个...

CastlePeaK 2019-08-30 11:22 评论0 收藏0
CSS结构与布局

摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

figofuture 2019-08-30 13:13 评论0 收藏0
CSS结构与布局

摘要：当列表中至少包含四项时，命中包括该项之后的所有列表项当然，不止于此，的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此，对于响应布局也可以不用担心了，虽然有点点，但也算完美的解决了， title: 结构与布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 宽度自适应 CSS3 新增宽度属性值 width:mi...

BearyChat 2019-08-22 10:49 评论0 收藏0