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の幅を調整します。

Answer 2

ソリューションに欠けている重要な部分は、テーブル幅の設定です。テーブル幅が固定されると（たとえば、に設定されると100%）、列幅も固定されます。あなたはここでそれを見ることができます：http：//jsfiddle.net/9QkVd/1/

私のサンプルコードはcollapsed、CSS値を直接操作する代わりにクラスを切り替えます。これは、より信頼性の高いアプローチです。また、同じクラスが列内の他のすべてのセルに設定され、text-overflow: ellipsisそこにも適用できるようになっています。

Answer 3

解決策は次のとおりです：http：//cssdesk.com/xvpR2