Jquery可调整大小的div跳转

我在引导表中有一个可调整大小的div。当我在左手柄或右手柄上调整元素的大小时，我希望位置保持不变，并让div在我调整大小的手柄处移动。然而，我的div会跳来跳去，因为我猜引导中的表单元格没有固定的宽度。我想不出一个方法，比如说在右边拖动，让我的div的左端保持在原位

HTML:

CSS:

我还试着增加一些位置：绝对位置，但div仍然在跳跃

下面是一个JSFIDLE：

---

如果你设置

的宽度，比如：

td{width:60px；}

那么它就可以工作了，但是我想这不是我的想法……如果你设置

的宽度，比如：

td{width:60px；}

那么它就可以工作了，但是我想这不是我的想法。。。

<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>

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

#event {
  background-color: green;
}