javascript - 更改列宽而不考虑其内容

Question

每当用户单击列标题时，我想将表格列动态折叠到特定宽度(在本例中为 10 像素)。如果我们能在更改列宽的同时保持单元格高度不变，那就太好了。
例如表格将显示为:

当用户点击列标题(此处为红色减号按钮)时，列应该缩小并且看起来像:

这里在 jsFiddle 列中给出的例子缩小到固定宽度和高度保持不变。

这是我到目前为止尝试过的方法 JsFiddle .

我用过:

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

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

如果我们能得到像 datatable 这样允许此功能的插件，那就太好了(即动态折叠和扩展列到特定宽度)。有很多插件允许用户隐藏特定列，但我想缩小而不是隐藏。

---

编辑:

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

Answer 1

是这样的:http://jsfiddle.net/jY7mb/1/

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