教你实现首行及首列固定 Table

scq000 发布于2019-08-30 13:57 / 3093人阅读

摘要：但单元格尺寸根据其不确定的内容伸展，且顶部及左侧表头也应随之调整宽高。将的剥离进行整体置为覆盖于之上，并将除首列单元格外的其它元素置为透明。

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

表面上，在顶部及左侧悬挂两栏并非难事。但单元格尺寸根据其不确定的内容伸展，且顶部及左侧表头也应随之调整宽高。

Table 天然具备如此属性，我们可将 thead 剥离进行 fixed，但首列每一项分散在每一行，如何整体剥离？显然剥离较棘手，需转变思路。

定义新元素模拟首列并悬挂于左侧，但其单元格如何同步同行单元格高度？利用 js 获取当前行高度并赋值于首列元素，假定表格上千行便需如此操作上千次，过于麻烦...

一个 Table 难搞定，两个何如？我需要它们一模一样：

令 table1 与 table2 共享一套样式、数据便可一模一样（使两者同行同列元素尺寸同步）。将 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...

idc机房托管私有云 html 首行固定 js实现table排序注释行及空行 python代码首行

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

转载请注明本文地址：https://www.ucloud.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表格属性及简单实例

摘要：用来定义的表格，具有本地属性表示边框，属性的值必须为或空字符串。而且中的文字默认会被加粗，而是不会的是数据标记，表示单元格的具体的数据用来定义表格的页眉，表头的包装器。这里主要总结记录下表格的一些属性和简单的样式，方便以后不时之需。 1、　　用来定义HTML的表格，具有本地属性 border 表示边框，border属性的值必须为1或空字符串()。该属性不会控制边框的样式，而是由CSS来控制...

番茄西红柿 2019-04-23 13:31 评论0 收藏0
第7期 Datawhale 组队学习计划

马上就要开始啦这次共组织15个组队学习涵盖了AI领域从理论知识到动手实践的内容按照下面给出的最完备学习路线分类难度系数分为低、中、高三档可以按照需要参加 - 学习路线 - showImg(https://segmentfault.com/img/remote/1460000019082128); showImg(https://segmentfault.com/img/remote/...

dinfer 2019-06-26 18:55 评论0 收藏0
python3学习笔记(1)----基本语法

摘要：一的基本语法缩进统一个或者个空格。中的数据类型中有个标准类型数字字符串列表元组集合字典数字复数在中，只有一种整数类型，表示长整型。如则会显示，并不是换行。空行与代码缩进不同，空行并不是语法的一部分。我们将首行及后面的代码组称为一个子句。一、python3的基本语法 1、缩进统一（1个tab或者4个空格）。 for i in range(10): print (i) ...

yanwei 2019-07-30 16:23 评论0 收藏0