title: Make TH Text inside a jquery ui resizable DIV go under the next TH if it does not fit the column width
body: <p>I have this headers on a table with a div inside:</p>
  
  <pre><code>&lt;TH&gt;&lt;DIV class="resize"&gt;Name of Column&lt;/DIV&gt;&lt;/TH&gt;
  &lt;TH&gt;&lt;DIV class="resize"&gt;Name of Column2&lt;/DIV&gt;&lt;/TH&gt;
  
  $(".resize").resizable();
  </code></pre>
  
  <p>So when the user resizes the column "Name of Column" it will be cut in spaces, and if the text inside the div is greater than the text in all TDs of the TBODY then the letters are kept outside the dividing line.</p>
  
  <p>What I want is that if this happens the header text from column1 will be under column2. For example:</p>
  
  <p>If this is the | dividing line at the beginning I'll have this:</p>
  
  <p>Name of Column | Name of column2</p>
  
  <p>When I resize it goes like this:</p>
  
  <p>Nam|e<br>
  of&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name of Column2<br>
  Col&nbsp;&nbsp;|umn<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br>
  1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br>
  2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br>
  3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|  </p>
  
  <p>And I want it to be like this:</p>
  
  <p>Nam|<br>
  of&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name of Column2<br>
  Col&nbsp;&nbsp;|<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br>
  1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br>
  2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br>
  3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|   </p>
  
  <p>So as you can see the text will remain under the second TH.</p>
  
  <p>Any ideas please?</p>