Question

首先，对不起我的英语。我试图在纯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/

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

在IE中的表格单元格中浮动DIV

1 个答案: