0

我有这样的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;
}

问题和问题：当我调整列的大小时，表格宽度受宽度页面的限制，我添加了一个div滚动以让表格width超出100%但仍然固定且无法正常工作，请参见DEMO HERE。

有没有合适的解决方案？

PS：这是我在这里找到的解决方案之一Resizable table columns with bz code and modified like demo in jsfiddle

4

0 回答 0