Table border issue in chrome after jquery drag stop

Question

Update using position: relative: td, th then, when dragging

Table border disappear after jquery drag

working fine in mozila and ie but not in chrome

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

Removing border-collapse from table css seems to have done the trick.

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

Check out at http://jsfiddle.net/YTZrj/1/