Jquery Resizable div跳了起来

Question

我在引导程序表中有一个可调整大小的div。当我在左侧或右侧手柄上调整元素的大小时，我希望位置保持不变并让div只是在手柄处移动我正在调整它的大小。然而我的div跳转导致bootstrap的表格单元格没有固定的宽度我猜。我无法找到一种方法让我们说在右侧拖动并让我的div的左端保持原位......

HTML：

<table class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td colspan="2">
        <div id="event">Content</div>
      </td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

JS：

$('#event').resizable({
    handles: "e,w"
});

CSS：

#event {
  background-color: green;
}

我也试过添加一些位置：绝对但是div仍然不停跳跃。

这是一个JSFiddle：

https://jsfiddle.net/59pa8d59/