HTML/jQuery 表：水平滚动，固定第一（左）列
我有一个表，显示一列测试名称，以及与测试相关的各种测试数据的多个（无限数量）列。由于会有多组数据，我想限制可以看到的数量，并且让用户能够水平滚动以显示/隐藏不同的数据组。
Jquery 表列滑动效果 的接受答案具有我认为的那种滑动效果我正在寻找，但是如何修复最左边的名称列？有大量数据，因此我不想克隆两个表，正如互联网上其他地方所建议的那样。
为名称创建一个固定表，为数据结果创建一个可滚动表，结果很接近，但行高根据接收到的数据量而变化（一个单元格内可以有几行文本），因此对齐会被打乱。
另外，我不想要默认的互联网滚动条。我有左/右箭头图像，我将使用它们来控制滚动，就像我上面发布的示例一样。
我花了大约 4 个小时在 StackOverflow 和互联网上的其他地方寻找答案，但我还没有找到任何合适的东西......任何帮助将不胜感激，谢谢！
编辑：绝对定位左列会导致表格的其余部分在左列下方向左移动（隐藏第一列数据）。添加与第一列内容相同的“镜像”列可以正常工作；问题是，当数据列的单元格高于相应的名称单元格时，绝对定位的名称单元格无法看到该事实并调整自身大小。想法？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我设法固定第一列，让其他列滑到下面，并显示第二列： http: //jsfiddle.net/Skooljester/trFPD/1/ 我现在将尝试解决您问题的其他部分。
I managed to make the first column fixed, have the others slide under, and have the second column show: http://jsfiddle.net/Skooljester/trFPD/1/ I'll try working on the other parts of your question now.
正如我所要求的，找到了与表格一起使用的东西。我之前所说的关于创建一个固定表和一个可滚动表的内容需要进行一些修改：
我保留了包含测试名称和数据的原始表，并将其放入滚动窗口中。然后我创建了另一个只有左列的表，并将其绝对放置在滚动表中左列的默认位置上。然后，我使用 jQuery 调整单列单元格的大小以匹配数据单元格的可变高度（如果名称单元格较高，数据单元格仍会从重复列接收此数据）。
我还保留了一个列宽数组。当我单击左侧或右侧滚动按钮时，我会按所需的数组值滚动表格，并递增/递减数组索引。
不发布代码是因为我不想重写和格式化示例，但如果您对如何执行此操作有疑问，请随时询问。 =)
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. =)