5

每当用户单击列标题时，我想将表格列动态折叠到特定宽度（在这种情况下为 10 像素）。如果我们可以在更改列宽的同时保持单元格高度固定，那就太好了。
例如，表格将显示如下：
在此处输入图像描述
当用户单击列标题（此处为红色减号按钮）时，列应缩小并应如下所示：
在此处输入图像描述
在 jsFiddle 中给出的示例中，列缩小到固定宽度，高度保持不变。

这是我迄今为止尝试过的JsFiddle。

我用过：

  table-layout:fixed;
  word-wrap:break-word;

但列缩小到与第一个单词相同的宽度。它不会破坏制作 width 的工作10px。
这里列宽缩小以适应 word Lonnnnng。

如果我们有任何插件，如允许此功能的数据表（即动态折叠和扩展列到特定宽度），那就太好了。有许多插件允许用户隐藏特定列，但我想缩小它而不是隐藏。

编辑 ：

在尝试了一些建议之后，我意识到插件将是更好的解决方案，因为我必须照顾所有浏览器和分辨率支持。通过书面代码完成所有这些工作将是我要做的最后一件事 [我必须做 :D] .我们有提供这种功能的插件吗？

4

3 回答 3

3

像这样的东西：http: //jsfiddle.net/jY7mb/1/

我将每个单元格的内容包装在 a 中div，并调整 div 的宽度而不是列的宽度。

于 2012-05-23T08:56:49.407 回答
2

您的解决方案中缺少的重要部分是设置表格宽度。一旦表格宽度固定（例如设置为100%），列宽也变得固定。你可以在这里看到它：http: //jsfiddle.net/9QkVd/1/

我的示例代码还切换collapsed类而不是直接操作 CSS 值，这是一种更可靠的方法。并且为列中的所有其他单元格设置了相同的类，以允许在text-overflow: ellipsis那里应用。

于 2012-05-23T08:31:00.620 回答
1

这是一个解决方案：http ://cssdesk.com/xvpR2

于 2012-05-17T11:01:21.583 回答