Question

I want to dynamically collapse table column to specific width (10 px in this case) whenever user clicks on column header. It will be good if we can keep the cells height fixed while changing the column width.
For example table will be displayed like:

When user clicks on column header (red minus button here), column should shrink and should look like:

Here in example given in jsFiddle column shrinks to fixed width and height remains same.

Here is what I have tried till now JsFiddle.

I have used:

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

but column shrinks to the width same as first word. It don’t break the work to make width 10px.
Here column width shrinks to adapt word Lonnnnng.

It will be great if we get any plugin like datatable which allows this feature (i.e. dynamic collapse and expansion of columns to a particular width). There are many plugin which allows user to hide particular column but I want to shrink it instead of hiding.

---

EDIT :

After trying few suggestions I realize that a plugin will be better solution for this as I have to look after all browser and resolution supports.Doing all this stuff through written code will be the last thing I will do [I have to do 😀 ].Do we have any plugin which provides such feature?

Answer 1

The important part missing from your solution is setting the table width. Once the table width is fixed (e.g. set to 100%) the column width becomes fixed as well. You can see it here: http://jsfiddle.net/9QkVd/1/

My example code also toggles the collapsed class instead of manipulating CSS values directly, this is a more reliable approach. And the same class is set for all other cells in the column to allow applying text-overflow: ellipsis there as well.