title: Resizing table columns in a big table
body: <p>I'm looking for a simple way to make my table columns re-sizable. 
  Since my table has a lot of columns the page has to have a scrollbar. That seems to make all the code for resizing not working. I have tried my own code and several plugins but it never works.</p>
  
  <p><a href="http://jsfiddle.net/SP9xW/2/" rel="nofollow">jsfiddle</a> with a plugin</p>
  
  <p><a href="http://jsfiddle.net/L2f7F/5/" rel="nofollow">jsfiddle</a> without plugin but still not working</p>
  
  <p>I'm using this code I found here in so:</p>
  
  <pre><code>$(function() {
      var pressed = false;
      var start = undefined;
      var startX, startWidth;
  
      $("table th").mousedown(function(e) {
          start = $(this);
          pressed = true;
          startX = e.pageX;
          startWidth = $(this).width();
          $(start).addClass("resizing");
          $(start).addClass("noSelect");
      });
  
      $(document).mousemove(function(e) {
          if(pressed) {
              $(start).width(startWidth+(e.pageX-startX));
          }
      });
  
      $(document).mouseup(function() {
          if(pressed) {
              $(start).removeClass("resizing");
              $(start).removeClass("noSelect");
              pressed = false;
          }
      });
  });
  </code></pre>