jQuery Sortable 在排序时折叠 table 边框

Question

我在另一个 SO 线程上发现了这个 jsfiddle，它具有与我拥有的类似代码并且可以重现该行为。 http://jsfiddle.net/LMqNH/74/

您会看到 table 有一个 3px 的红色边框。当您拖动以对一行进行排序时，您会注意到红色底部边框被截断并且只延伸到第一列。

这是代码

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 包装器来围绕 table 使用您想要的边框，它工作正常。请注意，为了简单起见，我将 table 的宽度设置为 100%（您可以根据需要更改 table 和包装器的宽度）。

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

jQuery Sortable 在排序时折叠 table 边框

jQuery Sortable collapses table border on sort

jquery

jquery-ui

jquery-ui-sortable