jquery - jqueryドラッグストップ後のChromeでのテーブル境界の問題

Question

position: relative:ドラッグするときにtd、th、を使用して更新します

jqueryドラッグ後にテーブルの境界線が消える

mozilaで正常に動作しますが、chromeでは動作しません

ここにjsfiddle

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

テーブルcssからborder-collapseを削除すると、うまくいったようです。

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

http://jsfiddle.net/YTZrj/1/でチェックしてください。

Answer 2

table {border-collapse:separate;} 

テーブルの外観が少し異なりますが、この問題はもう発生しません。

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