HTML / jQuery Tables：水平滚动，修复第一个（左）列 [英] HTML/jQuery Tables: Scroll horizontally, fix the first (left) column

问题描述

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

Jquery表列滑动效果的接受答案具有滑动效果，我正在寻找，但你如何解决最左边的名字列？有很多数据，所以我不想克隆两个表，正如互联网上其他地方所建议的那样。

为数据结果创建一个固定表名称和一个可滚动表格，但行高度对于接收到的数据量是可变的（可以有几个单元格内的文本行），所以对齐将被抛弃。

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

我花了大约4个小时看着StackOverflow，其余的互联网的答案，但我还没有找到任何合适的东西......任何帮助将不胜感激，谢谢！

编辑：绝对定位左列导致表格的其余部分左移到左列下方（隐藏第一列数据）。添加与第一列相同内容的镜像列可以正常工作;问题是，当数据列的单元格高于相应的名称单元格时，绝对定位的名称单元格不能查看该事实并调整其自身大小。想法？

解决方案

按照我的要求，找出适用于表的内容。我之前所说的创建一个固定表和一个可滚动表的工作经过了一些修改：

我将原始表保存为测试名称和数据，并将其放入滚动窗口。然后，我创建了另一个只有左列的表格，并将其完全放在滚动表格中左列的默认位置。然后，我使用jQuery来调整单列单元格的大小以匹配数据单元格的变量高度（如果名称单元格较高，数据单元格仍然从重复列中接收这些数据）。

我也保留一列列宽。当我点击左侧或右侧滚动按钮时，我通过所需的数组值来滚动表格，并递增/递减数组索引。

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

I have a table that displays a column of test names, with several (unlimited number) of columns of various test data associated with the tests. Since there will be several sets of data, I want to limit the number that can be seen, and have the user be able to scroll horizontally to show/hide the different sets of data.

The accepted answer to Jquery table column sliding effect has the sort of sliding effect that I'm looking for, but how do you fix the leftmost column of names? There is a lot of data so I don't want to clone two tables, as has been suggested elsewhere on the Internet.

Creating one fixed table for the names and one scrollable table for the data results came close, but the row height is variable on the amount of data received (there can be several rows of text within a cell), so the alignment gets thrown off.

Also, I don't want a default Internet scrollbar. I have left/right arrow images that I will be using to control scrolling, much like the example I posted above.

I've spent about 4 hours looking on StackOverflow and the rest of the Internet for answers, but I haven't found anything suitable yet... any help would be appreciated, thanks!

Edit: Absolute-positioning the left column results in the rest of the table shifting left underneath the left column (hiding the first column of data). Adding a "mirror" column with the same content as the first column works okay; the issue is that when the data columns have cells that are taller than the corresponding name cells, the absolute-positioned name cell can't see that fact and resize itself. Thoughts?

解决方案

Figured out something that works with tables, as I asked. What I said before about creating one fixed table and one scrollable table works with some modification:

I kept my original table with test names and data, and put it into a scrolling window. Then I created another table that only had the left column and placed it absolutely over the default position of the left column in the scrolling table. I then use jQuery to resize the single column cells to match the variable heights of the data cells (if the name cells are taller, the data cells still receive this data from the duplicated column).

I also keep an array of column widths. When I click on the left or right scroll button, I scroll the table over by the required array value, and increment/decrement the array index.

Not posting code because I don't want to rewrite and format an example, but if you have questions about how to do this, feel free to ask. =)

这篇关于HTML / jQuery Tables：水平滚动，修复第一个（左）列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！