How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?
<p>I've successfully created 3 view boxes using an html table. Each view can be hidden. Now I'd like to have each views width and height to be resizable, pretty much exactly like how its done in JSFiddle where each code editing box can be resized. I found a jQuery widget but it only allow for the columns to be resized and not the boxes. I also found this but it was not implemented with a table <a href="http://www.bootply.com/RwnUXIcLap" rel="nofollow">http://www.bootply.com/RwnUXIcLap</a> . Here's what I have so far <a href="https://jsfiddle.net/3waurzbf/" rel="nofollow">https://jsfiddle.net/3waurzbf/</a> . </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var tds = document.getElementsByTagName('td');
var inputs = document.getElementsByTagName('input');
var rows = document.getElementsByTagName('tr');

console.log(inputs);
console.log(tds);
var changeView = function () {

  for (var i = 0; i &lt; inputs.length; i++) {
    if (!inputs[i].checked) {
      if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
    } else {
      if(tds[i].style.display === 'none') tds[i].style.display = '';
    }
  }

  if (!inputs[0].checked &amp;&amp; !inputs[1].checked) rows[0].style.display = 'none';
  else rows[0].style.display = '';

  if (!inputs[2].checked) rows[1].style.display = 'none';
  else rows[1].style.display = '';

};

changeView();


//$("#views-table").colResizable({liveDrag:true});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html {
  height: 100%;
}

body {
  height: 100%;
}

table {
  width: 100%;
  height: 90%;
}

table td {
  text-align: center;
  border: 1px solid black;
}

#views-container {
  height: 10%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;View 1&lt;/td&gt;

    &lt;td&gt;View 2&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
    &lt;td colspan="2"&gt;View 3&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;div id="views-container"&gt;
  &lt;input type="checkbox" checked="checked" onclick="changeView()"&gt;&lt;label&gt;View 1&lt;/label&gt;
  &lt;input type="checkbox" checked="checked" onclick="changeView()"&gt;&lt;label&gt;View 2&lt;/label&gt;
  &lt;input type="checkbox" checked="checked" onclick="changeView()"&gt;&lt;label&gt;View 3&lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>