css3 translate 完美詮釋表頭固定

Eirunye 發(fā)布于2019-08-20 14:33 / 1195人閱讀

摘要：效果如下感覺是不是很和諧，而且代碼也少，不足的是以下不支持屬性，但現(xiàn)在也沒多少要考濾以下的兼容了吧，做前端老兼顧低版本的瀏覽器難免會讓自己束手束腳。。。。如果喜歡就推薦吧，不要問為什么直接推薦。。附加本電腦的效果

效果如下：

感覺是不是很和諧，而且代碼也少，不足的是IE9以下不支持transform屬性，但現(xiàn)在也沒多少要考濾IE9以下的兼容了吧，做前端老兼顧低版本的瀏覽器難免會讓自己束手束腳。。。。

下面來看下代碼吧

HTML結(jié)構(gòu)

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 表頭固定

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81736.html

vue移動端復雜表格表頭，固定表頭與固定第一列

摘要：固定的表格頭部與第一列的寬高行高都是通過獲取真實的表格的寬高來設定的。通過展示的表格的上下滾動從而帶動固定在第一列的向上滾動，向左右滾動帶動覆蓋上表頭的的左右滾動。 showImg(https://segmentfault.com/img/remote/1460000015798687); 前言最近做移動端的h5項目，要做一個可配置表頭的復雜表格，網(wǎng)上找了很久也沒什么好方法，結(jié)合網(wǎng)上...

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

摘要：適用情景單對象水平居中原理將子元素設置塊級表格，再設置水平居中。結(jié)語有些是水平居中，有些是垂直居中，將它們某兩個合在一起就能實現(xiàn)水平和垂直均居中。前言 css水平和垂直居中是一個亙古不變的話題，它常常出現(xiàn)在優(yōu)美的網(wǎng)頁上以及各大前端面試當中。說來慚愧，在兩年前面試的時候，我完全不知道如何做到水平和垂直均居中的方法，那場面別提有多尷尬了（ps：特想找個地洞鉆進去）。。。時隔兩年，對于這個...

CastlePeaK 2019-08-30 11:22 評論0 收藏0
CSS結(jié)構(gòu)與布局

摘要：當列表中至少包含四項時，命中包括該項之后的所有列表項當然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應布局也可以不用擔心了，雖然有點點，但也算完美的解決了， title: 結(jié)構(gòu)與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應 CSS3 新增寬度屬性值 width:mi...

figofuture 2019-08-30 13:13 評論0 收藏0
CSS結(jié)構(gòu)與布局

摘要：當列表中至少包含四項時，命中包括該項之后的所有列表項當然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應布局也可以不用擔心了，雖然有點點，但也算完美的解決了， title: 結(jié)構(gòu)與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應 CSS3 新增寬度屬性值 width:mi...

BearyChat 2019-08-22 10:49 評論0 收藏0