jQuery Sortable排序倒塌表格邊框

Question

我發現這個jsfiddle在另一個SO線程上，具有類似的代碼，我可以重現該行爲。 http://jsfiddle.net/LMqNH/74/

您會看到表格有3像素的紅色邊框。當你拖動排序行時，你會注意到紅色底部邊界被切斷，只能到第一列。

下面的代碼

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; 
}; 

$('tbody').sortable({ 
    helper: sortHelper 
}).disableSelection(); 

Answer 1

我發現了一個小的解決方法來解決這個問題。我只是製作了一個div包裝器，用你想要的邊框繞過桌子，並且工作正常。請注意，爲了簡化，我將表格的寬度設置爲100％（如果需要，可以更改表格和包裝的寬度）。

這裏是Fiddle

HTML

<div class='table-wrapper'> 
<table> 
    <thead> 
    <tr><th>A</th><th>B</th><th>C</th></tr> 
    </thead> 
    <tbody> 
    <tr sortOrder="1"><td>1</td><td class="sortOrder"></td><td>a</td></tr> 
    <tr sortOrder="2"><td>2</td><td class="sortOrder"></td><td>b</td></tr> 
    <tr sortOrder="3"><td>3</td><td class="sortOrder"></td><td>c</td></tr> 
    <tr sortOrder="4"><td>4</td><td class="sortOrder"></td><td>d</td></tr> 
    </tbody> 
</table> 
</div> 

CSS

table{ 
    border-collapse:collapse; 
    /*above is problem in chrome and safari. 
    IE, FF, Opera seem ok*/ 

margin:auto; width:100%; 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;} 

.table-wrapper{ 
    border: 3px solid #f03 !important; 
    width:auto; 
    padding:0; 
}