时间戳

首页 > 解决方案 > 使用 CSS Grid（可能还有 Mask/Clip/Javascript - NOT HTML 表格）具有固定列和行（冻结窗格）的网格

javascript - 使用 CSS Grid（可能还有 Mask/Clip/Javascript - NOT HTML 表格）具有固定列和行（冻结窗格）的网格

问题描述

我需要创建一个数据网格。理想情况下，我想使用 CSS Grid。网格可能很大，需要水平和垂直滚动。但是，第一行和第一列必须始终可见。我想要的效果类似于Excel中的“冻结窗格” （有时称为“锁定”行和/或列）。

此外，滚动后，我需要能够单击网格中的项目以及实现一些拖放行为。

我使用一种利用 HTML 表格sticky和z-indexCSS 属性的技术来完成这项工作。您可以看到在以下小提琴中工作： https ://jsfiddle.net/dmboucher/txcLkq60/26/

请注意如何水平和垂直滚动，但您始终可以看到第一行和第一列。

使用 html 表格不太理想是有原因的。我宁愿使用 CSS Grid 或 FlexBox...没有 html 表格。到目前为止，我对 CSS Grid 和 FlexBox 的实验都失败了。

我研究了使用 CSSmasking和/或clipping. 这里的想法是在背景中有一个巨大的 div（网格），但只能“通过”掩码“窗口”查看它，然后使用滚动条和 javascript 将大 div 移动到掩码后面，这样你可以看到所需的网格部分。有这样的效果。我也无法让它发挥作用。

唯一成功的方法是使用 html 表格。

这可以在不使用 html 表的情况下完成吗？其他建议？

谢谢您的帮助！

标签： javascriptcss-grid

解决方案

推荐阅读