jQuery Sortable Border Collapse

table{border-collapse: collapse;} requires redraw to work. $('table').hide().show(0); works only with '0' duration.

by benstenson

HTML

<table>
    <thead>
        <tr><th>A</th><th>B</th></tr>
    </thead>
    <tbody>
        <tr sortOrder="1"><td>1</td><td class="sortOrder"></td></tr>
        <tr sortOrder="2"><td>2</td><td class="sortOrder"></td></tr>
        <tr sortOrder="3"><td>3</td><td class="sortOrder"></td></tr>
        <tr sortOrder="4"><td>4</td><td class="sortOrder"></td></tr>
    </tbody>
</table>

CSS

table{
    border-collapse:collapse;
    /*above is problem in chrome and safari.
    IE, FF, Opera seem ok*/
    
    margin:auto; width:95%; font-family:sans-serif; font-weight:bolder; cursor:default;}
th{background-color:#444;color:#aaa;padding:15px;text-align:center;}
td{background-color:#a60;color:#222;border:2px solid #fa0;padding:15px;text-align:center;}
tbody tr:hover td{background-color:#af6;border-color:#6a0;}

JavaScript

sortHelper = function(e, el) {
    var $orig = el.children();
    var $hlp = el.clone();
    $hlp.children().each(function(index) {
        $(this).width($orig.eq(index).width());
    });
    return $hlp;
};

redraw = function(event, ui) {
    //uncomment to redraw - does not work in chrome without '0' duration for show()
    //ui.item.parent().hide().show(0);
};

$('tbody').sortable({
    helper: sortHelper,
    axis: 'y',
    stop: redraw
}).disableSelection();