javascript - Change column width irrespective of its content - Stack Overflow

admin管理员组

文章数量:1389148

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 :D ].Do we have any plugin which provides such feature?

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 :D ].Do we have any plugin which provides such feature?

• javascript
• jquery
• html
• plugins

Share Improve this question Follow edited Oct 26, 2017 at 18:19 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 17, 2012 at 10:18 AjinkyaAjinkya 22.7k3333 gold badges113113 silver badges163163 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Something like this: http://jsfiddle/jY7mb/1/

I wrapped the content of each cell in a div, and I adjust the width of the div instead of the width of the column.

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 bees fixed as well. You can see it here: http://jsfiddle/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.

Here's a solution: http://cssdesk./xvpR2

本文标签： javascriptChange column width irrespective of its contentStack Overflow