jQuery Sortable在排序时折叠表边框

Question

I found this jsfiddle on another SO thread with similar code that I have and can reproduce the behavior. http://jsfiddle.net/LMqNH/74/

You'll see that the table has a 3px red border. When you drag to sort a row, you'll notice that the red bottom-border gets cut off and only goes as far as the first column.

Here's the code

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

I found a little workaround to solving the issue. I just made a div wrapper to go around the table with the border you desire, and it works fine. Note that I made the width of the table to 100% for simplicity (you can alter the width of the table and wrapper as you need).

Here is the 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;
}