将大型html表放入小空间是不可能的？

Question

显而易见的答案是“它不可能”或“使数据变小”......我试过这些并且它们不洗，所以我需要提出另一种选择

网页上有一个表格，其中包含14列。其中2列的文本很长（但不能换行 - 每行的文本必须全部在一行上）。毋庸置疑，在第9列之后，桌子会从屏幕的右侧消失！

那么，任何人都可以想到一个神奇的解决方案，使这个表完全适合屏幕吗？

不好的答案：

• 减少数据量
• 允许行中的文本换行到第二行
• “它无法完成” - 是的，我知道，但某个地方有人会有天才的答案，或者是一些神奇的jQuery库来做这种事情

有趣但需要更多信息：

• 将所有列向下滑到足以使表适合，然后溢出数据，可在列扩展时查看 例如：|这是我的数据，但它是...... |

Answer 1

Display the text with an ellipsis after the 10th character and display a hint text with the full text when the user moves his mouse over it…

省略号是三个点...我经常使用它们......你看到了吗？...

Answer 2

对于nowrap列，您可以设置它们，以便内部文本包含在div中，该div转到绝对位置并在悬停时扩展到所需宽度。

你也可以使用jqgrid subgrid

你可以只为一行的onclick事件找到jquery ui对话框，并在那里有你的一些数据。

Answer 3

如果我在你的位置，我会考虑在iframe中渲染表格。这样，您可以轻松地将整个表格设置为您想要的大小，用户必须滚动才能看到这些列。可以将keyPress事件附加到iframe，并将这些按键挂钩以进行滚动，如果您认为它会使用户更容易。

我能想到的第二个选择是让所有单元格更窄一些，这样屏幕边缘就有一点空余空间。向表的每个元素添加一个类，说明它所在的行（这使得更容易一起引用它们）。将click事件附加到表中并使用event.target来单击单元格（这将比将事件附加到每个单元格所占用的浏览器内存更少）。然后，该click事件将扩展该列的宽度以显示所有数据，并将类标签添加到第一行中的相应单元格。然后，下次单击该列中的单元格时，表格可以检查第一行是否展开，并确定它是否应收缩回原始行或展开。在如此大的表中，用户可能只对一次几列之间的相关性感兴趣，这种方法的优点是在任何给定时间只扩展它们感兴趣的那些列。

我能想到的第三个也是最后一个选择就是使用一个不起眼的div。附加一个click元素，就像在最后一个段落中一样，但是这次让事件处理程序在感兴趣的单元格上创建一个div，该div足够大以包含所有文本，然后如果单击该div则使其消失。

最合适的解决方案取决于用户将如何使用表数据。如果您想要上述任何建议的代码段，只需发表评论和/或给我发送电子邮件即可。

祝好运！ ;）

Answer 4

这可能是一个不同的想法：尝试使用BySlideMenu插件为Mootools。

它适用于菜单，但也许它可以用于您的餐桌。看一下4号和下一个例子。

Answer 5

您可以实现鱼眼网格，就像我使用C＃和WinForms所做的那样：

alt text http://img523.imageshack.us/img523/9827/fisheye2b.jpg

此控件旨在显示包含1000列和1000行的表。但是，我不确定使用直接HTML和JavaScript是否可行。如果您愿意使用ActiveX，我可能会帮助您。

Answer 6

jqGrid可能是一个解决方案（在Advanced-> Resizing下）。我不是一个大数据网格，但至少它允许调整大小，但我没有用固定宽度表尝试它。

Answer 7

您可以将文本分成多行，并在剪切或复制时仍然显示为一行。使用wbr (word break) tag。

Answer 8

在两个实际行中显示每个逻辑行，使用斑马条纹使它们清晰连贯？

我可以想象那些可行的情况，但它高度依赖于数据。

Answer 9

如果一次只需要扩展一行中的一列，则可以在表上使用水平accordion。或者，你可以做像this answer（甚至this）这样的事情。在演示中，单击表标题以查看结果。

Answer 10

那么，另一种可能的解决方案：切换行和列，将列标题放在左侧而不是顶部。您必须水平滚动以滚动行（但是，嘿，滚动条很有用）但是每个单元格都可以使用屏幕的整个宽度减去页眉宽度。

因此，切换表格的X轴和Y轴。不漂亮，但它可以工作。

Answer 11

将表放在具有重载的div中：滚动。你会得到水平滚动条，但桌子看起来应该是假想的。例：

<div style="width:100%;overflow:scroll;">
<table>...</table>
</div>

Answer 12

试试这个CSS解决方法。您可以使用溢出和自动换行属性来获得所需的结果。

table { 
table-layout:fixed; 
width:100%; 
overflow:scroll; 
border:1px solid #f00; 
word-wrap:none; 
} 

Answer 13

我会用鱼眼视图制作一张桌子，就像mac的底座一样。

你可以使表格列非常窄（例如，5px，让你有超过100列），很酷的是，当你将鼠标悬停在一列之上时，它会完全展开，并且两侧的列都会扩展一半，下一列扩展..一点点。

这给你一个很好的导航效果..你可以看到一个例子here

（来源：ndesign-studio.com）

Answer 14

我根据Jon的建议与你自己一起分割和斑马，切断并显示......当用户徘徊一列时，你可以用完整的内容显示一个全宽的盒子。当显示框时单击使其在将鼠标移动到另一列时不会消失，以便用户可以复制/粘贴等等。

Answer 15

尝试为包含大量文本的列实现工具提示控件。例如，只显示前100个字符，然后在行的末尾插入一些漂亮的图标，它会弹出，也是一个漂亮的工具提示，其中包含该列的全文。有很好的jQuery工具提示可以完成你的工作。这种实现方式不会破坏页面的外观，而且在工具提示中显示的文本非常灵活。