I need that a resizable (jQuery ui) div in a TH don't go smaller that TD width or make TD overflow:hidden

Question

I have this headers on a table with a div inside:

<TH><DIV class="resize">Name of Column</DIV></TH>
<TH><DIV class="resize">Name of Column2</DIV></TH>

$(".resize").resizable();

When the user resize the div I need it to stop when the TD cannot get any smaller, or make the TD text overflowable (new word :D) under the next TD.

I tried by given all TD a class call hideOverflow and put the overflow property hidden, but the TD always stop shrinking at the biggest word it contains. So I need the div inside the TH to stop shrinking at the same width that the TD or make the TD continue shrinking with an overflow hidden.

Any thoughts appreciated!

Answer 1

I fix this by adding DIVs to the TDs and make them "overflow:hidden" as well