Jquery 将一个大的html表放入一个小空间是不可能的吗？

对此，显而易见的答案是“这是不可能的”或“使数据更小”……我已经尝试过这些方法，但它们不起作用，所以我需要想出一个替代方法

网页上有一个表，其中有14列。其中两列中有相当长的文本（但不能换行-每行文本必须全部在一行上）。不用说，在第9列之后，屏幕右侧的桌子就消失了

那么，有人能想出一个神奇的解决方案，让这个桌子完全适合屏幕吗

错误答案：

• 减少数据量
• 允许行中的文本换行到第二行
• “这是不可能做到的”——是的，我知道，但是某处的某个人会有一个天才的答案，或者某个神奇的jQuery库来做这种事情

有趣但需要更多的信息：

• 将所有列向下挤压到合适的位置，这样表就会有溢出的数据，可以在扩展列时查看这些数据
  e、 g.：|这是我的数据，但是|

---

将每个逻辑行显示在两个实际行中，使用斑马线使它们清晰一致

---

我可以想象这样做的情况，但它高度依赖于数据。

使用重载：scroll将表放在div中。你们会看到水平滚动条，但桌子看起来和你们想象的一样。例如：

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

...

我会按照乔恩的建议和你自己的建议分割斑马线，剪掉并展示。。。。当用户将鼠标悬停在列的某个部分时，您可以显示一个略低的全宽框，其中包含完整的内容。当框显示时单击，使其在将鼠标移动到另一列时不会消失，以便用户可以复制/粘贴等。

在第10个字符后显示带省略号的文本，并在用户将鼠标移到框上时显示带全文的提示文本

---

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

尝试为包含大量文本的列实现工具提示控制。 例如，只显示前100个字符，然后在行的末尾插入一些好看的图标，这将弹出，还有一个漂亮的工具提示，其中包含该列的全文。有一些很好的jQuery工具提示可以帮你完成任务。

---

此实现不会破坏页面的外观，并且在工具提示中显示多少文本方面非常灵活。

尝试将此作为CSS解决方案。您可以使用overflow和word wrap属性来获得所需的结果

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

---

对于nowrap列，您可以对其进行设置，使其中的文本包含在div中，该div位于绝对位置，并在悬停时扩展到所需的宽度

也可以使用jqgrid子网格

---

您可以只打开行的onclick事件的jqueryui对话框，并在其中包含一些数据。

如果一行中一列需要一次展开，则可以在表中使用水平。或者，你可以做一些类似（甚至）的事情。在演示中，单击表格标题以查看结果。

您可以将文本分成多行，在剪切或复制时仍然显示为一行。使用。

< P>如果我处在你的位置，我会考虑把桌子放成一个字形。通过这种方式，您可以轻松获得所需大小的完整表，用户必须滚动才能看到这些列。如果您认为可以方便用户使用，可以将按键事件附加到iframe并将这些按键挂起滚动

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

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

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

---

祝你好运

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

---

这是菜单，但也许它可以用于您的桌子。看看第4个示例和下一个示例。

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

---

此控件用于显示包含1000列和1000行的表。但是，我不确定直接使用HTML和JavaScript是否可以做到这一点。如果你愿意使用ActiveX，我也许可以帮你。

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

您可以将表列设置得非常窄（例如，5px，让您拥有100多列），最酷的是，当您将鼠标悬停在一列上方时，该列将完全展开，其两侧的列将半展开，下一列将展开。。有一点