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

Question

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

要求是：

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

我们正在建立一个反应应用程序。我们检查了react-sticky-table以及其他非反应库，例如：Stickytable和Sticky-kit。

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

是否有JS（反应或非反应，最好是非jquery）库可以做到这一点？

如果没有，假设我们使用上面提到的任何库得到第一行标题和第一列修复，有没有办法根据滚动使row-group heading row s固定/静态？

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

更新：刚刚发现这个插件似乎正在执行此操作：http://maslianok.github.io/stickyRows/multiplerows.html。这很好，但保持这个问题对pureJS或反应解决方案开放。

Answer 1

我曾在同一个用户界面上工作，但它是纯javascript和jQuery的混合，但不太关心前端库，因为大多数都在某些需求点或数据量上失败。 我建议采用自己的解决方案，我做了同样的事情，5年后客户都可以接受。 1.为标题和内容创建单独的表。 2.给每个cloumn完全相同的列跨度宽度。例如。 <colspan width="50px"> 3.在LHS中放置一个带有一列的单独表格。 4.在javascript中编写代码，将您的LHS表与主表一起滚动。

道歉，因为很难提供实例。