具有固定标题和列以及选择性固定行的可滚动表

Question

我需要一张如图所示的表格。

要求是：

• 开始向下滚动表格时，标题行（第一模糊行）已修复
• 开始水平滚动时，第一列是固定的
• 另外，当我们向下滚动时，黑色的并列的行（我将其称为row-group heading row ）-“标题1”和“标题2”-将在标题行下方变为固定，当所有行属于它的团体在视野中​​。 当我们进一步向下滚动时，当看到下一组行时，上row-group heading row消失，而在其位置（固定主标题行的正下方）的row-group heading row对应的row-group heading row当前视图中的行将被修复。

我们正在构建一个React应用。 我们检出了： react-sticky-table和其他非反应性库，例如： Stickytable和Sticky-kit 。

他们似乎都没有做我们想要的事情。

是否有执行此操作的JS（反应或非反应，最好是非jquery）库？

如果不是，假设我们使用上述任何一个库获取固定的第一行标题和第一列，是否可以通过滚动使row-group heading row s固定/静态？

我也更喜欢使用<table>组元素建立<table> ，而不仅仅是div。 但这不是严格的要求。

更新：刚发现此插件似乎正在执行此操作： http : //maslianok.github.io/stickyRows/multiplerows.html 。 很好，但是对于pureJS或react解决方案，请不要提出这个问题。

Answer 1

我曾在相同的UI上工作，但它是纯JavaScript和jQuery的混合体，但是对前端库的关注较少，因为它们中的大多数在某些需求或数据量时失败。 我建议您使用自己的解决方案，因为我做了5年以来一直被客户接受的解决方案。 1.为标题和内容创建一个单独的表。 2.给每个色谱柱完全相同的色谱柱跨度宽度。 例如， <colspan width="50px"> 3.在LHS中放置一个带有一列的单独表。 4.用javascript编写代码，该代码可将LHS表与主表一起滚动。

抱歉，很难给出有效的例子。