无论内容如何,​​都要更改列宽

Question

我想在用户单击列标题时动态地将表列折叠为特定宽度(在本例中为10 px).如果我们可以在改变列宽的同时保持单元高度固定,那将是很好的.
例如,表格将显示如下:

当用户单击列标题(此处为红色减号按钮)时,列应缩小并应如下所示:

这里在jsFiddle列中给出的示例缩小到固定宽度和高度保持相同.

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

我用过:

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

但是列缩小到与第一个单词相同的宽度.它不会破坏宽度的工作10px.
此处列宽缩小以适应单词Lonnnnng.

如果我们获得任何允许此功能的数据表插件(即动态折叠和将列扩展到特定宽度),那将会很棒.有许多插件允许用户隐藏特定列,但我想缩小它而不是隐藏.

---

编辑:

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

Answer 1

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

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