jquery - jquery拖动停止后chrome中的表格边框问题

Question

然后在拖动时使用position: relative:td, th 进行更新

jquery拖动后表格边框消失

在 mozila 和 ie 中工作正常，但在 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 中删除边框折叠似乎已经成功了。

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

查看http://jsfiddle.net/YTZrj/1/

Answer 2

table {border-collapse:separate;} 

会使表格看起来有点不同，但不会再引起这个问题。

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