jQuery dragtable plugin is breaking scrollable HTML table layout

问题: I have a HTML scrollable table. I am using jquery dragtable plugin for drag and drop sorting columns. This plugin is working well with my table except one CSS issue. When I...

问题:

I have a HTML scrollable table. I am using jquery dragtable plugin for drag and drop sorting columns. This plugin is working well with my table except one CSS issue. When I click on table column header for sorting, the layout of table is screwed up. Since the table is too wide and the clone table created by this plugin has far wide width than that of its original table. It can't adjust within viewpoint and a horizontal scrollbar appears in browser which makes my webpage design very ugly.

Instead of all this, I want to scroll table while I drag and drop column header for sorting. The table should scroll like it does in its normal view when I don't use sorting.

I know in jquery.dragtable.js, at line number 235, the below snippet of code and its next portion is responsive for this issue but not sure how to fix it. Can you please help me to debug it?

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

My code in action to help you see the issue yourself:

$(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>

Please see the code in action in full page mode. When you click on any column header except first (which is not sortable), the entire table becomes visible and thus the page layout is screwed up with ugly horizontal scrollbar. The table stretches beyond its boundary.


回答1:

Please check this i use ui css and class name 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>

  • 发表于 2019-12-25 16:16
  • 阅读 ( 284 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除