How to implement resizable table columns the right way using plain vanilla JavaScript?
<p>I am having troubles while trying to implement a table with resizable table columns.
I am working on a library which I called <code>Natural</code> and inside the library I have made the <code>Natural.UI.Table</code> component.</p>

<p>Let me tell you that the library is something that I work on when I can in order to develop my vanilla JS skills. Also, I wanted to create this component because I didn't find one on the web.</p>

<p>I would like to implement resizable columns like the ones you can find here (see the liveDrag option): <a href="http://www.bacubacu.com/colresizable/" rel="nofollow noreferrer">http://www.bacubacu.com/colresizable/</a>
but using my defined table structure (two tables, one for the thead and the other for the tbody, see the HTML) and in a way so that when you are resizing the table you will also take into consideration the next and previous columns depending on whether you are going to the right or left with the mouse while resizing.
There are the following constraints:</p>

<p>When going right and there's a right variation (with <code>variation</code> I mean a changing of the mouse position which I use in order to calculate how much a column should shrink or grow):</p>

<ul>
<li>The current cell grows and the other cell is the first right cell which didn't meet a thresold yet (with <code>thresold</code> I denote the moment when the <code>clientWidth</code> property of the cell's <code>div.natural-ui-table-cell-content</code> reaches 0);</li>
<li>If there isn't a right cell with an unmet thresold, everything remains the same;</li>
</ul>

<p>When going left and therefore there's a left variation:</p>

<ul>
<li>If the thresold for the current cell is met, the current cell becomes the previous one;</li>
<li>The current cell becomes smaller and the other cell is the right cell which grows;</li>
</ul>

<p>If there isn't any variation:</p>

<ul>
<li>Everything remains the same;</li>
</ul>

<p>I can't post the full code of the library here because of the number of chars limit, but here is the link of my Google drive account where you can download the JS and the CSS:</p>

<p><a href="https://drive.google.com/open?id=0B03ft4DyvkqkVmdQZWdWU2VTM3M" rel="nofollow noreferrer">https://drive.google.com/open?id=0B03ft4DyvkqkVmdQZWdWU2VTM3M</a></p>

<p>In order to use it, just include it in a page and create a table with the needed structure:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Natural.UI.Table&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;        
        &lt;link rel="stylesheet" href="path/to/natural-ui.css" /&gt;
        &lt;script src="path/to/natural.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="natural-ui-table"&gt;
            &lt;div class="natural-ui-table-header"&gt;
                &lt;table cellpadding="0" cellspacing="0" border="0"&gt;
                  &lt;thead&gt;
                    &lt;tr&gt;
                      &lt;th&gt;
                        &lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;Code&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
                      &lt;/th&gt;
                      &lt;th&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;Company&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;Price&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;Change&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;Change %&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                &lt;/table&gt;
            &lt;/div&gt;
            &lt;div  class="natural-ui-table-content"&gt;
                &lt;table cellpadding="0" cellspacing="0" border="0"&gt;
                  &lt;tbody&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AAC&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;AUSTRALIAN COMPANY&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;$1.38&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;+2.01&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;div class="natural-ui-table-cell"&gt;&lt;div class="natural-ui-table-cell-content"&gt;&lt;span&gt;-0.36%&lt;/span&gt;&lt;div class="natural-ui-table-cell-content-right-fader"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
                    &lt;/tr&gt;

                  &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;        
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>This renders the following table:</p>

<p><a href="https://i.stack.imgur.com/xTgao.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xTgao.png" alt="enter image description here"></a></p>

<p>If I try to use the handles I am able to resize the columns of the table:</p>

<p><a href="https://i.stack.imgur.com/q5Z1I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q5Z1I.png" alt="enter image description here"></a></p>

<p>But when I start to do it in a fast way, I end up with unexpected results (like unmet thresolds and horizontal overflow, which I don't want):</p>

<p><a href="https://i.stack.imgur.com/HhnhV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HhnhV.png" alt="enter image description here"></a></p>

<p>You can find the code of the component on line <code>2471</code> of the <code>natural.js</code> file (on the Google Drive's link), the listener responsible for the resizing of the columns is defined on line <code>2582</code> (again I can't post the full code here, because of the chars limit), <code>resizeEventMouseDownListener</code>:</p>

<pre><code>var resizeEventMouseDownListener = function(e) {
                    e.preventDefault();

                    var currentPos = e.pageX;
                    var variation = Number.parseInt(currentPos - originalPos); // The variation (how much one column grows or decreases).
                    var currentCellIndex = currentCell.indexInParent(); // Index of the current cell inside its parent row.
                    var otherCellIndexOffset; // Offset from the current cell index used to determine the other cell

                    originalPos = currentPos; // The new original pos is always the current one.
...
</code></pre>

<p>What is the problem with my code? How can I improve it and achieve my requirements?</p>

<p>The purpose of this component is of course educational but I wouldn't hesitate to use it for some of my projects if only it would work as it should.</p>

<p>Can someone of you guys here help me? Thank you very much for the attention. Please write me if you need further explanations.</p>