HTML / jQuery表:水平滚动,修复第一个(左)列

问题描述 投票:5回答:2

我有一个表格,显示一列测试名称,其中包含与测试相关的各种测试数据的几列(无限数量)。由于将有多组数据,我想限制可以看到的数量,并让用户能够水平滚动以显示/隐藏不同的数据集。

接受Jquery table column sliding effect的答案有我正在寻找的那种滑动效果,但是你如何修复最左边的名字?有很多数据,所以我不想克隆两个表,正如互联网上其他地方所建议的那样。

为名称创建一个固定表,为数据结果创建一个可滚动表,但行高在可接收的数据量上是可变的(单元格中可能有多行文本),因此对齐将被抛弃。

另外,我不想要默认的Internet滚动条。我有左/右箭头图像,我将用它来控制滚动,就像我上面发布的示例。

我花了大约4个小时在StackOverflow和互联网的其余部分寻找答案,但我还没有发现任何合适的东西...任何帮助将不胜感激,谢谢!

编辑:绝对定位左列导致表的其余部分左移到左列下方(隐藏第一列数据)。添加与第一列具有相同内容的“镜像”列可以正常工作;问题是,当数据列的单元格高于相应的名称单元格时,绝对定位的名称单元格无法看到该事实并自行调整大小。思考?

jquery html html-table slide horizontal-scrolling
2个回答
6
投票

我设法修复第一列,让其他列滑动,并让第二列显示:http://jsfiddle.net/Skooljester/trFPD/1/我现在尝试处理你问题的其他部分。


1
投票

根据我的要求,找出了适用于桌子的东西。我之前所说的关于创建一个固定表和一个可滚动表的方法可以进行一些修改:

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

我还保留了一系列列宽。当我单击左或右滚动按钮时,我将表格滚动到所需的数组值,并递增/递减数组索引。

不发布代码,因为我不想重写和格式化示例,但如果您对如何执行此操作有疑问,请随时提问。 =)

© www.soinside.com 2019 - 2024. All rights reserved.