Question

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

您会看到该表格有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包装器，用你想要的边框围绕桌子，它工作正常。请注意，为简单起见，我将表的宽度设置为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;
}

jQuery Sortable在排序时折叠表边框

1 个答案: