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

发布于 2024-10-21 14:36:04 字数 1136 浏览 3 评论 0原文

首先，对不起我的英语。我正在尝试用纯 Javascript 制作可拖动且可调整大小的表格列。我在单元格内插入了 2 个区域，一个用于拖动（div），第二个用于调整大小（span），就像您在下面的示例中看到的那样。在 Chrome 和 Firefox 中一切正常，但在 IE8 中则不然。

问题是在调整大小期间，当 div 不适合单元格并跳转到单元格下时，您可以在图片。我建议属性“overflow:hidden”应该修复它，但没有运气。

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/

原文

first fo all, sorry for my english. I am trying to do dragable and resizible table columns in pure Javascript. I inserted inside a cell 2 areas, one for draging (div) and 2nd for resizing (span) like you can see in example bellow. Everything works fine in Chrome and Firefox but not in IE8.

Problem is during resizing when div doesn't fit in cell and jump under cell as you can see "Column1" in image. I would suggest property "overflow:hidden" should fix it, but no luck.

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'> </span>" + 
                    "<div class='ui-column-draggable'>" +  
                      column.innerHTML +
                    "</div>";

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

听闻余生 2024-10-28 14:36:04

这应该可以...

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/simvidas/5mzgP/3/

This should do it...

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;
}

Live demo: http://jsfiddle.net/simevidas/5mzgP/3/

回复收藏 0 原文

~没有更多了~