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

Question

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

要求是：

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

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

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

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

如果没有，假设我们使用上述任何库修复了第一行标题和第一列，有没有办法基于滚动使 row-group heading rows 固定/静态？

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

更新：刚刚发现这个插件似乎正在这样做：http://maslianok.github.io/stickyRows/multiplerows.html。很好，但请为 pureJS 或 react 解决方案保留这个问题。

Answer 1

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

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