html - dataTables - 固定列，是否可以将滚动条移到外面？它还在我想修复的表中创建了一个缺口

Question

这是这里问题的延续:dataTables - Can't get horizontal scroll & fixed column to do their job. Seems to render differently everywhere. What am I doing wrong?

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

• 我有一张之前造型的照片，但我在下面发布我的答案时以某种方式设法将其编辑掉了。我认为你做不到。
• 您仍然可以通过转到下面的 jsfiddle 链接查看它之前的样子。

我需要知道是否有一种方法不仅可以缩小明显由滚动条引起的间隙，而且还需要知道是否有一种方法可以将滚动条移动到表格的外部。

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

Answer 1

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

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

现在看起来像这样:

稍后进行大量调整