title: Change column width irrespective of its content
body: <p>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.<br>
  For example table will be displayed like:<br>
  <img src="https://i.stack.imgur.com/zERYq.jpg" alt="enter image description here"><br>
  When user clicks on column header (red minus button here), column should shrink and should look like:<br>
  <img src="https://i.stack.imgur.com/ymgHP.jpg" alt="enter image description here"><br>
  Here in example given in jsFiddle column shrinks to fixed width and height remains same.  </p>
  
  <p>Here is what I have tried till now <a href="http://jsfiddle.net/Ajinkya_Parakh/DJ3Yk/#base" rel="nofollow noreferrer">JsFiddle</a>. </p>
  
  <p>I have used: </p>
  
  <pre><code>  table-layout:fixed;
    word-wrap:break-word;    
  </code></pre>
  
  <p>but column shrinks to the width same as first word. It don't break the work to make width <code>10px</code>.<br>
  Here column width shrinks to adapt word <code>Lonnnnng</code>.   </p>
  
  <p><strong>It will be great if we get any plugin like datatable which allows this feature</strong> (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.  </p>
  
  <hr>
  
  <p><strong>EDIT :</strong>  </p>
  
  <p>After trying few suggestions I realize that a <strong>plugin will be better solution</strong> 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?</p>