1

这是这个问题的延续：dataTables - Can't get Horizo​​ntal scroll & Fixed column to do their job。似乎到处渲染不同。我究竟做错了什么？

在大多数情况下，我得到了显示我想要的方式的数据表。但这就是它的样子。

  • 我有一张以前外观的照片，但在下面发布我的答案时，我设法将其编辑了。我不认为你能做到这一点。
  • 通过转到下面的 jsfiddle 链接，您仍然可以看到它以前的样子。

我需要知道是否有办法不仅可以缩小滚动条明显造成的差距，而且是否有办法将滚动条移动到表格的外部。

padding-right: 140px;确实将它移了过来，但也掩盖了 Action 列。然后我尝试将 z-index 应用于操作列，但是当我将其移到上方时，它会覆盖底部的水平滚动。我显然无法改变高度，因为那样它就不会与桌子的其余部分对齐。有什么想法吗？

4

2 回答 2

0

在我弄清楚之前，我花了一些时间和一些失败。最终，我最终为生成滚动条的容器添加了一个填充，向操作 div 添加了一个 z-index，这已经是{position: absolute;}. 然后，我添加了一些 jquery 来调整几件事的高度和宽度，并且必须相应地调整样式。

在填充、z-index 和定位之后，其中很大一部分是非静态表格将滚动到现在悬停的 Actions Columns 后面。因此，我使用 jquery 在其之前插入了 Actions 列的克隆（或任何最后一列，例如，它可能是也可能不是其他页面上的 Actions），因此它将充当占位符并将所有内容推到左侧并且静态操作列现在将与克隆重叠，并且您希望保持可见的所有内容都保留在它的左侧。如果您以这种方式执行此操作，重要的是创建克隆列的 jquery 发生在 dataTable.js 和/或 FixedColumns.js 之前，因为它需要表 HTML 就位，以便它可以正确地完成它。

现在看起来像这样：

在此处输入图像描述

后期调整很多

于 2013-02-25T18:38:46.043 回答
0

我使用以下内容从固定列数据表中删除滚动条间隙。

 table#mainDataTable{
       margin-left: 300px !important; 
 }


 div.DTFC_ScrollWrapper div.dataTables_scroll div.dataTables_scrollBody{
       padding-left: 300px;
       left: -300px; 
 }

 div.DTFC_ScrollWrapper div.DTFC_LeftWrapper div.DTFC_LeftBodyWrapper{
       z-index: 1;
 }

这假设您iLeftWidth在 FixedColumn 初始化中设置为 300px。选择器还假设bJQueryUI：数据表初始化为假。

于 2013-06-14T17:14:45.487 回答