title: resize html table TDs with javascript
body: <p>I have this html table:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td id="c0"&gt;bla&lt;/td&gt;
          &lt;td class="Resizor" id="c01" onmousedown="setPosition(event);" onmouseover="setResizeColumns(&amp;#39;c01&amp;#39;, &amp;#39;c0&amp;#39;, &amp;#39;c1&amp;#39;);"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td id="c1"&gt;bla&lt;/td&gt;
          &lt;td class="Resizor" id="c12" onmousedown="setPosition(event);" onmouseover="setResizeColumns(&amp;#39;c12&amp;#39;, &amp;#39;c1&amp;#39;, &amp;#39;c2&amp;#39;);"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td id="c2" &gt;bla&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;blu&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;blu&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;blu&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;blu&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;blu&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;blu&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And this is my js script:</p>
  
  <pre><code>var MinSize=0;
  var _startPosition = 0;
  var _diffPosition = 0;
  var _allowMove = false;
  var _resizerColumn = null;
  var _firstColumn = null;
  var _secondColumn = null;
  var _resizerColumnLeft = 0;
  var _resizerColumnWidth = 0;
  var _firstColumnLeft = 0;
  var _firstColumnWidth = 0;
  var _secondColumnLeft = 0;
  var _secondColumnWidth = 0;
  var _systemEvent = null;
  if (navigator.appName == 'Netscape') {
      document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP | Event.ONLOAD);
  }
  document.onmouseup = disableMouseMovement;
  document.onmousemove = setNewPosition;
  function setPosition(e) {
      // Called for OnMouseDown event
      if (navigator.appName == 'Netscape') {
      _systemEvent = e;
      } else {
      _systemEvent = event;
      }
      _startPosition = _systemEvent.clientX;
      _allowMove = true;  
      _resizerColumnLeft = findPosX(_resizerColumn);
      _resizerColumnWidth = _resizerColumn.offsetWidth; //_resizerColumn.style.width;
      _firstColumnLeft = findPosX(_firstColumn);
      _firstColumnWidth = _firstColumn.offsetWidth; //_firstColumn.style.width;
      _secondColumnLeft = findPosX(_secondColumn);
      _secondColumnWidth = _secondColumn.offsetWidth; //_secondColumn.style.width;
      return true;
  }
  
  function setResizeColumns(resizerColumn, firstColumn, secondColumn) {
      // Called for OnMouseOver event
      // resizerColumn is the actual object of the column that will be moved so that
      // firstColumn and secondColumn can be resized.
      // firstColumn will have its dimensions either grown or shrunk.
      // secondColumn will have the exact opposite done to it that firstColumn has.
      // If firstColumn is shrink by 60px, secondColumn is grown by 60px, the opposite also holds true.
      resizerColumn=document.getElementById(resizerColumn);
      firstColumn=document.getElementById(firstColumn);
      secondColumn=document.getElementById(secondColumn);
      if (_allowMove == false) {
          _resizerColumn = resizerColumn;
          _firstColumn = firstColumn;
          _secondColumn = secondColumn;
      }
      return true;
  }
  
  function disableMouseMovement(e) {
      // Called for OnMouseUp event
      _allowMove = false;
      return false;
  }
  
  function setNewPosition(e) {
      // Called for OnMouseMove event
      // BEGIN_HACK so that setPosition() can work.
      if (navigator.appName == 'Netscape') {
      _systemEvent = e;
      } else {
      _systemEvent = event;
      }
      // END_HACK
      newPosition = _systemEvent.clientX;
      if (_allowMove) {
          _diffPosition = _startPosition - newPosition;
  
          var tpos1 = (parseInt(_firstColumnWidth) - parseInt(_diffPosition)) ;
          var tpos2 = (parseInt(_secondColumnWidth) + parseInt(_diffPosition)) ;
          if (tpos1&lt;MinSize) return;
          if ((tpos2&lt;MinSize) &amp;&amp; (_firstColumnWidth&gt;tpos1)) return;
          if (tpos2&lt;0) tpos2=0;
          if (tpos1&lt;0) tpos1=0;
  
          _firstColumn.style.width = tpos1+ "px";
          _secondColumn.style.width = tpos2+ "px";
      }
      return true;
  }
  
  function findPosX(obj) {
      var curleft = 0;
      if (obj.offsetParent){
          while (obj.offsetParent){
              curleft += obj.offsetLeft
              obj = obj.offsetParent;
          }
      }
      else if (obj.x)
      curleft += obj.x;
      return curleft;
  }
  
  function findPosY(obj){
      var curtop = 0;
      if (obj.offsetParent){
          while (obj.offsetParent){
              curtop += obj.offsetTop
              obj = obj.offsetParent;
          }
      }
      else if (obj.y)
      curtop += obj.y;
      return curtop;
  }
  </code></pre>
  
  <p>I want to resize <code>&lt;Td&gt;</code> over 100% of the table's width and didnt stop resizing by adding horizental scroll that will not be fixed to 100% of screen 
  The problem with my code is it fix width to 100% (see demo). is there a solution for that ?</p>
  
  <p><a href="http://www.wikistuce.info/lib/exe/fetch.php/javascript/colredim.htm" rel="nofollow"><strong>LIVE DEMO</strong></a></p>