0

首先，对不起我的英语。我正在尝试用纯 Javascript 制作可拖动和可调整大小的表格列。我在单元格中插入了 2 个区域，一个用于拖动（div），第二个用于调整大小（span），如下面的示例所示。在 Chrome 和 Firefox 中一切正常，但在 IE8 中却不行。

问题是在调整大小时，当 div 不适合单元格并跳到单元格下时，您可以在image中看到“Column1” 。我建议属性“溢出：隐藏”应该修复它，但没有运气。

CSS：

.ui-column-resizable
{
  float:right;
  height:20px !important;
  display:inline;
  cursor:w-resize;
  position:relative;
  overflow:hidden;
  text-align:center;
  white-space:nowrap;
  background-color:blue;
  margin: -2px -2px -2px 0;
}


.ui-column-draggable
{
  height:17px;
  cursor:move;
  position:relative;
  overflow:hidden;
  background-color:yellow;
  white-space:nowrap;
  text-align:center;
}

JavaScript：

column.innerHTML = "<span class='ui-column-resizable'>&nbsp;</span>" + 
                    "<div class='ui-column-draggable'>" +  
                      column.innerHTML +
                    "</div>";

http://jsfiddle.net/A5kVs/2/

4

1 回答 1

1

这个应该做...

HTML：

<td>             
    <div class="drag">
        Column 1
        <div class="resize"></div>
    </div>
</td>

CSS：

.drag {
    position:relative;
    background-color:yellow;
    padding:1px 10px 1px 5px;
    cursor:move;
}

.resize {
    position:absolute;
    background-color:blue;
    right:0;
    width:5px;
    top:0;
    height:100%;
    cursor:w-resize;
}

现场演示：http: //jsfiddle.net/simevidas/5mzgP/3/

于 2011-03-14T13:15:02.113 回答