html - サイズ変更可能な水平スクロール可能な 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>

そして私のJ：

$(".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;
}

問題と質問: 列のサイズを変更すると、テーブルの幅がページの幅によって制限されます。テーブルを超えdivられるようにスクロールを追加しましたが、まだ固定されていて動作しません。 DEMO HEREを参照してください。width100%

これに対する適切な解決策はありますか？

PS：これは私がここで見つけた解決策の1つです