Adjustable Table with Truncating Data for HTML
<p>I'm trying to make a table that has adjustable column sizes. If the column size is adjusted too small, then the data and header inside the table becomes truncated with ellipsis.</p>

<p>I'm using the colResizable library from <a href="http://www.bacubacu.com/colresizable/" rel="nofollow noreferrer">http://www.bacubacu.com/colresizable/</a></p>

<pre><code>$("#expand-table").colResizable({
  fixed: false,
  liveDrag: true,
  gripInnerHtml: "&lt;div class='grip2'&gt;&lt;/div&gt;",
  draggingClass: "dragging"
});
</code></pre>

<p>My css: </p>

<pre><code>.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}
</code></pre>

<p>Here is a JSFiddle of what I've been trying so far: <a href="http://jsfiddle.net/ubm4n2ob/2/" rel="nofollow noreferrer">http://jsfiddle.net/ubm4n2ob/2/</a></p>

<p>I'm having trouble with a few things:</p>

<ul>
<li>The adjustable column size doesn't work inside a div. I plan to have a very long table, so it will be fit inside an overflow div which allows scrolling</li>
<li>The truncating isn't dynamically working with the table adjustments</li>
</ul>

<p>Any help would be appreciated. </p>