教你實現(xiàn)首行及首列固定 Table

scq000 發(fā)布于2019-08-30 13:57 / 3274人閱讀

摘要：但單元格尺寸根據(jù)其不確定的內(nèi)容伸展，且頂部及左側(cè)表頭也應隨之調(diào)整寬高。將的剝離進行整體置為覆蓋于之上，并將除首列單元格外的其它元素置為透明。

先秀一下 demo！此款 Table 源碼~

表面上，在頂部及左側(cè)懸掛兩欄并非難事。但單元格尺寸根據(jù)其不確定的內(nèi)容伸展，且頂部及左側(cè)表頭也應隨之調(diào)整寬高。

Table 天然具備如此屬性，我們可將 thead 剝離進行 fixed，但首列每一項分散在每一行，如何整體剝離？顯然剝離較棘手，需轉(zhuǎn)變思路。

定義新元素模擬首列并懸掛于左側(cè)，但其單元格如何同步同行單元格高度？利用 js 獲取當前行高度并賦值于首列元素，假定表格上千行便需如此操作上千次，過于麻煩...

一個 Table 難搞定，兩個何如？我需要它們一模一樣：

令 table1 與 table2 共享一套樣式、數(shù)據(jù)便可一模一樣（使兩者同行同列元素尺寸同步）。將 table1 的 thead 剝離進行 fixed；table2 整體置為 fixed 覆蓋于 table1 之上，并將 table2 除首列單元格外的其它元素置為透明。此時首行及首列懸掛完成了，但它們并未隨表格主體的滾動而滾動。

動用 js 獲取 window 滾動位置，scrollX 即為首行向左偏移距離，scrollY 為首列向上偏移距離：

var curX = 0;
var curY = 0;
$(window).on("scroll", function () {
    var scrollX = window.scrollX;
    var scrollY = window.scrollY;
    // 首行向左偏移 scrollX
    Math.abs(curX - scrollX) && $(".table1 .thead").css("left", -scrollX);
    // 首列向上偏移 scrollY（table2 僅首列非透明等同于整體偏移）
    Math.abs(curY - scrollY) && $(".table2").css("top", -scrollY);
    curX = scrollX;
    curY = scrollY;
});

講解完畢！

作者：呆戀小喵

我的后花園：https://sunmengyuan.github.io...

我的 github：https://github.com/sunmengyuan

原文鏈接：https://sunmengyuan.github.io...

云服務器 GPU云服務器 html 首行固定 js實現(xiàn)table排序注釋行及空行 python代碼首行

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115657.html

[LintCode/LeetCode/CC] Set Matrix Zeroes

摘要：把矩陣所有零點的行和列都置零，要求不要額外的空間。對于首行和首列的零點，進行額外的標記即可。這道題我自己做了四遍，下面幾個問題需要格外注意標記首行和首列時，從到遍歷時，若有零點，則首列標記為從到遍歷，若有零點，則首行標記為。 Problem Given a m x n matrix, if an element is 0, set its entire row and column t...

zhangwang 2019-08-14 15:22 評論0 收藏0
[Leetcode] Set Matrix Zeroes 矩陣置零

摘要：這個方法的缺點在于，如果我們直接將存入首行或首列來表示相應行和列要置的話，我們很難判斷首行或者首列自己是不是該置。 Set Matrix Zeroes Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. click to show follow up...

waltr 2019-08-14 12:31 評論0 收藏0
HTML表格屬性及簡單實例

摘要：用來定義的表格，具有本地屬性表示邊框，屬性的值必須為或空字符串。而且中的文字默認會被加粗，而是不會的是數(shù)據(jù)標記，表示單元格的具體的數(shù)據(jù)用來定義表格的頁眉，表頭的包裝器。這里主要總結(jié)記錄下表格的一些屬性和簡單的樣式，方便以后不時之需。 1、　　用來定義HTML的表格，具有本地屬性 border 表示邊框，border屬性的值必須為1或空字符串()。該屬性不會控制邊框的樣式，而是由CSS來控制...

番茄西紅柿 2019-04-23 13:31 評論0 收藏0
第7期 Datawhale 組隊學習計劃

馬上就要開始啦這次共組織15個組隊學習涵蓋了AI領域從理論知識到動手實踐的內(nèi)容按照下面給出的最完備學習路線分類難度系數(shù)分為低、中、高三檔可以按照需要參加 - 學習路線 - showImg(https://segmentfault.com/img/remote/1460000019082128); showImg(https://segmentfault.com/img/remote/...

dinfer 2019-06-26 18:55 評論0 收藏0
python3學習筆記(1)----基本語法

摘要：一的基本語法縮進統(tǒng)一個或者個空格。中的數(shù)據(jù)類型中有個標準類型數(shù)字字符串列表元組集合字典數(shù)字復數(shù)在中，只有一種整數(shù)類型，表示長整型。如則會顯示，并不是換行?？招信c代碼縮進不同，空行并不是語法的一部分。我們將首行及后面的代碼組稱為一個子句。一、python3的基本語法 1、縮進統(tǒng)一（1個tab或者4個空格）。 for i in range(10): print (i) ...

yanwei 2019-07-30 16:23 評論0 收藏0