具有调整大小的水平可滚动HTML表

Question

我有这样的html表：

<div id="wrapper">
    <table>
        <tr>
            <td>
                <div class="gridTableSeparator"></div>
                <div class="gridTableHeadline">aaa</div>
            </td>
            <td>
                <div class="gridTableSeparator"></div>
                <div class="gridTableHeadline">bbb</div>
            </td>
             <td>
                <div class="gridTableSeparator"></div>
                <div class="gridTableHeadline">ccc</div>
            </td>
            <td>
                <div class="gridTableSeparator"></div>
                <div class="gridTableHeadline">ddd</div>
            </td>
        </tr>
    </table>
</div>

和我的Js：

$(".gridTableSeparator").bind("mousedown", function () {
    var that = $(this).parent();
    $("body").bind("mousemove", function (event) {
        that.attr("width", event.pageX - that.offset().left);
    });
    $("body").bind("mouseup", function (event) {
       $(this).unbind("mousemove mouseup");
    });
 });

和风格是这样的：

.gridTableSeparator 
{
  width: 3px; 
  right:-4px;
  height:40px;
  float:right;    
  position:relative;  
  cursor: e-resize;
  background-color: black;
}
.gridTableHeadline 
{
  line-height: 40px;  
  overflow: hidden;
}
#wrapper {
 overflow-x: scroll;
}

问题＆amp;题： 当我调整列的大小时，表格宽度受到宽度页面的限制，我添加了一个div来滚动，让表width超过100%，但仍然已修复且无效，请参阅DEMO HERE

是否有适当的解决方案？

PS：这是我在Resizable table columns with bz code找到的解决方案之一，并在jsfiddle中像demo一样进行了修改