个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个 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/
25
4
0
$(document).ready(function() { function initDraggable(c){
我需要一个 GUI，允许我通过拖放来移动列。但我也希望能够动态添加/删除表格中的列。 我遇到了Dragtable插件似乎能够满足我的需要。我唯一不喜欢这个 GUI 的是它的文档不是最好的。 无论如何，
我有一个 HTML 可滚动表。我正在使用 jquery dragtable plugin用于拖放排序列。除了一个 CSS 问题外，该插件在我的表格中运行良好。当我点击表格列标题进行排序时，表格的布局被
我正在使用拖动表插件但是当我点击拖动它时它会做一些奇怪的事情它的 css 行为很奇怪我正在附加图片并且我的任何人都可以告诉为什么它的行为必须受到赞赏。它正在拖动列但准时拖动看起来像。 index.ht
我正在尝试为我的项目使用可拖动的 Javascript 库。 ID
我是一名优秀的程序员,十分优秀！