Tabelle Grenzfrage in Chrom nach jquery drag

Question

aktualisieren mit position: relative: td stoppen, th dann, wenn

Ziehen

Grenze Tabelle verschwinden nach jquery drag

Arbeits fein in mozila und ie aber nicht in chrom

jsfiddle here

HTML

<table> 
    <tr> 
     <th>id</th> 
     <th>name</th> 
     <th>city</th> 
    </tr> 
     <tr class="person"> 
     <td>1</td> 
     <td>abc</td> 
     <td>abc</td> 
    </tr> 
     <tr class="person"> 
     <td>2</td> 
     <td>xyz</td> 
     <td>xyz</td> 
    </tr> 
</table> 

CSS

table{ 
    border-collapse : collapse; 
} 

td, th{ 
    border : 1px solid #000; 
    padding : 5px 20px; 
} 

th{ 
    background-color : #f3f3f3; 
} 

.drag { 
    background-color : #f3f3f3; 
    height : 20px; 
    width : 100px; 
} 

JS

$('.person').draggable({ 
    helper : function(){ 
     return $('<div class="drag">Drag me</div>') 
    }, 
    cursor : 'crosshair', 
    cursorAt : {left : 50}, 
    start : function(){ 
     $(this).hide(); 
    }, 
    stop : function(){ 
      $(this).show(); 
    } 
}); 

Answer 1

Das Entfernen des Grenzkollaps von der Tabelle css scheint den Zweck erfüllt zu haben.

table{ 
     /* border-collapse : collapse */ 
} 

Check-out bei http://jsfiddle.net/YTZrj/1/

Answer 2

table {border-collapse:separate;} 

wird die Tabelle ein wenig anders aussehen, aber wird dieses Problem nicht mehr verursachen.

http://jsfiddle.net/YTZrj/4/