更改列宽而不考虑其内容答案

【问题标题】：Change column width irrespective of its content更改列宽而不考虑其内容
【发布时间】：2012-05-17 10:18:30
【问题描述】：

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

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

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

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

我用过：

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

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

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

编辑：

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

【问题讨论】：

标签： javascript jquery html plugins

【解决方案1】：

类似这样的：http://jsfiddle.net/jY7mb/1/

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

【讨论】：

看起来正是我正在寻找的东西。将尽量避免向每个 td 添加类的开销，而是更喜欢 Wladmirs 解决方案的一部分来做同样的事情。
好的。不知道cellIndex 属性。您可以使用 jQuery :nth-child 选择器在每一行中获取正确的单元格，而不是类名。
感谢蒂姆，您的解决方案非常有效。很困惑我应该给谁赏金。选择弗拉基米尔是因为他的快速和干净的方法。还是非常感谢。 +1：D
该死！ :)（提示：Wladimir 不起作用，因为表格宽度设置为 100%）

【解决方案2】：

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

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

【讨论】：

非常感谢您的回答。只是想知道我们是否可以在更改宽度的同时保持高度不变。看起来您的（您提供了将类应用于列中所有单元格的好方法）和蒂姆的回答（应用css 到 div 而不是 td) 一起满足我的所有需求。
@Ajinkya：您可能会为collapsed 类使用white-space: nowrap CSS 属性。
刚刚观察到，如果您尝试折叠所有列，则会出现问题。你能检查一下吗？在那之前，我会尝试找出问题所在。
@Ajinkya：嗯，表格宽度是 100%，它需要显示 something。我猜如果所有列都折叠了，您想更改表格宽度。见jsfiddle.net/9QkVd/2 - 如果发生这种情况，我在这里为表格添加collapsed 类，width: 0px; 则表示表格宽度是列宽的总和。

【解决方案3】：

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

【讨论】：

感谢您的建议。试过但没有运气jsfiddle.net/Ajinkya_Parakh/DJ3Yk/11
您的建议工作文本只需要在<div> 内，您使用的css 在应用于<td> 时不起作用。由于我的表格是动态创建的，因此无法将每个内容都放在 <div> 中。
这不也意味着您可以动态创建 div 吗？我自己没用过，但我认为 wrapInner 可以解决问题：api.jquery.com/wrapInner
将保留它作为最后一个选项，因为每当用户单击特定列标题时，我必须将每个单元格包装在特定列中。 + 1 用于 wrapInner :)
jsfiddle.net/Ajinkya_Parakh/DJ3Yk/14 只需为同一列中的所有td 应用相同的类。谢谢等待其他答案。