jQuery dragtable 插件打破了可滚动的 HTML 表格布局

我有一个 HTML 可滚动表。我正在使用 jquery dragtable plugin用于拖放排序列。除了一个 CSS 问题外，该插件在我的表格中运行良好。当我点击表格列标题进行排序时，表格的布局被搞砸了。由于表格太宽，本插件创建的克隆表格宽度比原始表格宽得多。无法在视点内调整，浏览器中出现水平滚动条，这让我的网页设计非常难看。

而不是所有这些，我想在拖放列标题进行排序时滚动表格。当我不使用排序时，表格应该像在正常 View 中一样滚动。

我知道在 jquery.dragtable.js 的第 235 行，下面的代码片段及其下一部分是对这个问题的响应，但不确定如何解决它。你能帮我调试一下吗？

  var sortableHtml = '<ul class="dragtable-sortable" style="position:absolute; width:' + totalWidth + 'px;">';

我的代码可以帮助您自己查看问题:

$(document).ready(function(){
	$('.tb_records').dragtable({dragaccept:'.accept'});
});

#tb_wrapper {
  border:1px solid #cccccc;
  max-width:960px;
  margin:50px auto;
  padding:10px;
}

.tb_responsive {
  overflow-x:auto;
  overflow-y:hidden;
}

.tb_records, .clone-column-table-wrap table {
  border-collapse:collapse;
  text-align:center;
  width:100%;
  table-layout:fixed;
}

.tb_records th {
  background-color:#5F5F5F;
  color:#FFFFFF;
  font-weight:bold;
}

th.accept {
  cursor:move;
}

.tb_records th, .tb_records td {
  padding:10px;
  border:1px solid #000000;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  overflow:-moz-hidden-unscrollable;
  text-overflow:ellipsis;
}

.tb_records tr:nth-child(even) {
  background-color:#F2F2F2;
}

.tb_records tr:hover {
  background-color:#F5F5F5;
}

<link rel="stylesheet" type="text/css" href="//akottr.github.io/css/reset.css" />
<link rel="stylesheet" type="text/css" href="//akottr.github.io/css/akottr.css" />
<link rel="stylesheet" type="text/css" href="//rawgit.com/akottr/dragtable/master/dragtable.css" />

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="//rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>

<div id="tb_wrapper">
    <div class="tb_responsive">
        <table class="tb_records" >
            <tr>
                <th style="width:100px;">Post ID</th>
                <th style="width:100px;" class="accept" id="pt_name" data-order="10">Post Name</th>
                <th style="width:100px;" class="accept" id="pt_url" data-order="20">Post URL</th>
                <th style="width:100px;" class="accept" id="pt_title" data-order="30">Post Title</th>
                <th style="width:100px;" class="accept" id="pt_heading" data-order="40">Post Heading</th>
                <th style="width:100px;" class="accept" id="pt_content" data-order="50">Post Content</th>
                <th style="width:100px;" class="accept" id="pt_pdate" data-order="60">Post Date Published</th>
                <th style="width:100px;" class="accept" id="pt_mdate" data-order="70">Post Date Modified</th>
                <th style="width:100px;" class="accept" id="pt_img" data-order="80">Post Image</th>
                <th style="width:100px;" class="accept" id="pt_views" data-order="90">Post Views</th>
                <th style="width:100px;" class="accept" id="pt_id" data-order="100">Column 1</th>
                <th style="width:100px;" class="accept" id="pt_pname" data-order="110"><span class="accept" style="width:100px;">Column 2</span></th>
                <th style="width:100px;" class="accept" id="pt_purl" data-order="120"><span class="accept" style="width:100px;">Column 3</span></th>
                <th style="width:100px;" class="accept" id="pt_ptitle" data-order="130"><span class="accept" style="width:100px;">Column 4</span></th>
                <th style="width:100px;" class="accept" id="pt_pheading" data-order="140"><span class="accept" style="width:100px;">Column 5</span></th>
                <th style="width:100px;" class="accept" id="pt_pcontent" data-order="150"><span class="accept" style="width:100px;">Column 6</span></th>
                <th style="width:100px;" class="accept" id="pt_ppdate" data-order="160"><span class="accept" style="width:100px;">Column 7</span></th>
                <th style="width:100px;" class="accept" id="pt_mpdate" data-order="170"><span class="accept" style="width:100px;">Column 8</span></th>
                <th style="width:100px;" class="accept" id="pt_pimg" data-order="180"><span class="accept" style="width:100px;">Column 9</span></th>
                <th style="width:100px;" class="accept" id="pt_pviews" data-order="190"><span class="accept" style="width:100px;">Column 10</span></th>
            </tr>
            <tr>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>2</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>3</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>4</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>5</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>6</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>7</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>9</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>10</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
        </table>
        </div>
</div>

请查看整页模式下的代码。当您单击除第一个(不可排序)以外的任何列标题时，整个表格都可见，因此页面布局被丑陋的水平滚动条搞砸了。表格超出了它的边界。

最佳答案

请检查我使用 ui css 和类名 ui-sortable。

$(document).ready(function(){
	$('.tb_records').dragtable({dragaccept:'.accept'});
});

#tb_wrapper {
  border:1px solid #cccccc;
  max-width:960px;
  margin:50px auto;
  padding:10px;
}

.tb_responsive {
  overflow-x:auto;
  overflow-y:hidden;
}

.tb_records, .clone-column-table-wrap table {
  border-collapse:collapse;
  text-align:center;
  width:100%;
  table-layout:fixed;
}

.tb_records th {
  background-color:#5F5F5F;
  color:#FFFFFF;
  font-weight:bold;
}

th.accept {
  cursor:move;
}

.tb_records th, .tb_records td {
  padding:10px;
  border:1px solid #000000;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  overflow:-moz-hidden-unscrollable;
  text-overflow:ellipsis;
}

.tb_records tr:nth-child(even) {
  background-color:#F2F2F2;
}
.ui-sortable {
 overflow: hidden !important;
 max-width: 100% !important;
 width: 100% !important;
 position: static !important;
}

.tb_records tr:hover {
  background-color:#F5F5F5;
}

<link rel="stylesheet" type="text/css" href="//akottr.github.io/css/reset.css" />
<link rel="stylesheet" type="text/css" href="//akottr.github.io/css/akottr.css" />
<link rel="stylesheet" type="text/css" href="//rawgit.com/akottr/dragtable/master/dragtable.css" />

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="//rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>

<div id="tb_wrapper">
    <div class="tb_responsive">
        <table class="tb_records" >
            <tr>
                <th style="width:100px;">Post ID</th>
                <th style="width:100px;" class="accept" id="pt_name" data-order="10">Post Name</th>
                <th style="width:100px;" class="accept" id="pt_url" data-order="20">Post URL</th>
                <th style="width:100px;" class="accept" id="pt_title" data-order="30">Post Title</th>
                <th style="width:100px;" class="accept" id="pt_heading" data-order="40">Post Heading</th>
                <th style="width:100px;" class="accept" id="pt_content" data-order="50">Post Content</th>
                <th style="width:100px;" class="accept" id="pt_pdate" data-order="60">Post Date Published</th>
                <th style="width:100px;" class="accept" id="pt_mdate" data-order="70">Post Date Modified</th>
                <th style="width:100px;" class="accept" id="pt_img" data-order="80">Post Image</th>
                <th style="width:100px;" class="accept" id="pt_views" data-order="90">Post Views</th>
                <th style="width:100px;" class="accept" id="pt_id" data-order="100">Column 1</th>
                <th style="width:100px;" class="accept" id="pt_pname" data-order="110"><span class="accept" style="width:100px;">Column 2</span></th>
                <th style="width:100px;" class="accept" id="pt_purl" data-order="120"><span class="accept" style="width:100px;">Column 3</span></th>
                <th style="width:100px;" class="accept" id="pt_ptitle" data-order="130"><span class="accept" style="width:100px;">Column 4</span></th>
                <th style="width:100px;" class="accept" id="pt_pheading" data-order="140"><span class="accept" style="width:100px;">Column 5</span></th>
                <th style="width:100px;" class="accept" id="pt_pcontent" data-order="150"><span class="accept" style="width:100px;">Column 6</span></th>
                <th style="width:100px;" class="accept" id="pt_ppdate" data-order="160"><span class="accept" style="width:100px;">Column 7</span></th>
                <th style="width:100px;" class="accept" id="pt_mpdate" data-order="170"><span class="accept" style="width:100px;">Column 8</span></th>
                <th style="width:100px;" class="accept" id="pt_pimg" data-order="180"><span class="accept" style="width:100px;">Column 9</span></th>
                <th style="width:100px;" class="accept" id="pt_pviews" data-order="190"><span class="accept" style="width:100px;">Column 10</span></th>
            </tr>
            <tr>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>2</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>3</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>4</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>5</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>6</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>7</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>9</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
            <tr>
                <td>10</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
                <td>1</td>
                <td>My Post</td>
                <td>my-post</td>
                <td>My Post</td>
                <td>My Post</td>
                <td>Lorem ipsum dolor sit amet.</td>
                <td>2017-07-21 13:58:16</td>
                <td>2019-07-30 22:38:36</td>
                <td>my-post.jpg</td>
                <td>7</td>
            </tr>
        </table>
        </div>
</div>

关于jQuery dragtable 插件打破了可滚动的 HTML 表格布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59437730/

jQuery dragtable 插件打破了可滚动的 HTML 表格布局

上一篇：html - 如何将垂直文本导航栏粘贴到右边而没有间隙？

下一篇：html - 元素周期表，元素一个比一个低