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

Question

每当用户点击列标题时，我想动态地将表列折叠为特定宽度（在本例中为10 px）。如果我们可以在改变列宽的同时保持单元高度固定，那将是很好的 例如，表格将显示如下：

当用户点击列标题（此处为红色减号按钮）时，列应缩小并应如下所示：

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

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

我用过：

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

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

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

---

编辑：

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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