Плавающий DIV в ячейке таблицы в IE - PullRequest
Новая
       11

Плавающий DIV в ячейке таблицы в IE

0 голосов
/ 14 марта 2011

сначала для всех, извините за мой английский.Я пытаюсь сделать перетаскиваемые и изменяемые размеры столбцов таблицы в чистом Javascript.Я вставил в ячейку 2 области, одну для перетаскивания (div) и 2 для изменения размера (span), как вы можете видеть в примере ниже.Все прекрасно работает в Chrome и Firefox, но не в IE8.

Проблема возникает во время изменения размера, когда div не помещается в ячейку и прыгает под ячейкой, как вы можете видеть «Column1» в image .Я бы предложил, чтобы свойство "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/

1 Ответ

1 голос
/ 14 марта 2011

Это должно сделать это ...

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/

...