HTML/jQuery表格：水平滚动，固定第一列（左边）

Question

5

我有一个表格，其中显示了一列测试名称，并带有与测试相关的各种测试数据的多个（无限数量）列。由于将会有几组数据，我想要限制可以看到的数量，并使用户能够水平滚动以显示/隐藏不同的数据集。

在Jquery table column sliding effect的被接受答案中有我正在寻找的滑动效果，但是如何修复最左边的名称列？由于存在大量数据，因此我不想克隆两个表格，正如其他地方建议的那样。

创建一个用于名称的固定表格和一个用于数据结果的可滚动表格已经接近完成，但是行高度根据接收到的数据量而变化（单元格内可能有几行文本），因此对齐会出现问题。

此外，我不想要默认的互联网滚动条。我将使用左/右箭头图像来控制滚动，就像我上面发布的示例一样。

我花了约4个小时在StackOverflow和互联网上寻找答案，但是我还没有找到合适的东西...任何帮助都将不胜感激，谢谢！

编辑：绝对定位左列导致其余表格向左移动，在左列下隐藏第一列数据。添加一个与第一列相同内容的“镜像”列可以正常工作；问题在于当数据列具有比相应名称单元格更高的单元格时，绝对定位的名称单元格无法看到该事实并调整其大小。你的想法是什么？

- codecraftnap

2个回答

1

我找到了一种适用于表格的解决方案，正如我之前所问的。我之前提到的创建一个固定表格和一个可滚动表格的方法需要进行一些修改：

我保留了原始的测试名称和数据表格，并将其放入了一个滚动窗口中。然后我创建了另一个仅包含左列的表格，并将其绝对定位在滚动表格的默认位置上。然后我使用jQuery来调整单列单元格的大小，以匹配数据单元格的可变高度（如果名称单元格更高，则数据单元格仍从重复的列接收此数据）。

我还保留了一组列宽度的数组。当我点击左侧或右侧滚动按钮时，我按照所需的数组值滚动表格，并增加/减少数组索引。

我不会发布代码，因为我不想重新编写和格式化示例，但如果您有关于如何执行此操作的问题，请随时询问。=)

- codecraftnap

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ayyp · Accepted Answer

我成功地使第一列固定，并使其他列向下滑动，并使第二列显示：http://jsfiddle.net/Skooljester/trFPD/1/ 我现在将尝试解决您问题的其他部分。