jQuery: Cách thay đổi kích thước cột với jQuery

Cách thay đổi kích thước cột với jQuery: 

HTML:

<div id="wrapper">
  <h1>Drag and Resize</h1>
  <table>
      <thead>
          <tr>
              <th>Table Head</th>
              <th>Table Head</th>
              <th>Table Head</th>
              <th>Table Head</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data 12412412414124</td>
          </tr>
      </tbody>
  </table>
</div>

CSS:

#wrapper {
  max-width: 55em;
  margin: 0 auto;
}
table {
  border: 1px solid #999;
  thead{
    border-bottom: 1px solid #999;
    background: #e9e9e9;
    padding: 1.5em;
    th {
      padding: 0.5em;
      margin: 0 0.25em;
    }
  }
  tbody{
    td {
      padding: 0.5em;
      margin: 0 0.25em;
      border-right: 1px solid #999;
      &:last-child{
        border-right: none;
      }
    }
  }
}

JS:

$(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");
    });
    
    $(document).mousemove(function(e) {
        if(pressed) {
            $(start).width(startWidth+(e.pageX-startX));
        }
    });
    
    $(document).mouseup(function() {
        if(pressed) {
            $(start).removeClass("resizing");
            pressed = false;
        }
    });
});