Change column width regardless of its contents

I want to dynamically reduce a table column to a specific width (in this case 10 pixels) whenever the user clicks on the column heading. It will be good if we can keep the height of the cells when changing the width of the column.
For example, the table will be displayed as follows:

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

Here, in the example given in the jsFiddle column, it is reduced to a fixed width, and the height remains the same.

Here is what I have tried so far JsFiddle .

I used:

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

, . , 10px.
Lonnnnng.

, , datatable, (.. ). , , , .

EDIT:

, , . , ( : D). - , ​​?