Question

我对HTML，CSS和Javascript不是很熟悉，但我的任务是创建一个表系统，允许用户调整表列的大小，同时将所述标题固定在表的顶部显示当用户滚动表格时。

我知道这听起来令人困惑，所以我创建了一个小提琴，可以准确地表示我目前所拥有的内容，并希望它能够更新。

我已经决定使用这里找到的插件JSColResizable： http://www.bacubacu.com/colresizable/ 并将其设置在小提琴中，允许调整表的大小。我还将表格包装在一个div中，只允许在任何时候显示300px的高度。

当用户将鼠标悬停在表格分区上并向下滚动时，表格标题会在分区之外滚动，这使得用户很难将哪一列与之相关联。我只需要表条目继续以相同的方式工作并在div外滚动，但允许标题在div的顶部保持静态，以便它们可以更容易地与列相关。

如果有人有这个问题的经验，我将非常感谢可以提供的任何帮助。

Answer 1

目前没有一种原生方式可以让表格具有粘性页眉和页脚。提供该功能的所有库都使用div或其他标记来实现。话虽如此，我可能不会尝试在这里重新发明轮子。您可以尝试SlickGrid - 它非常稳定，即使使用庞大的数据集也能很好地工作

Answer 2

你必须为它写一点class，并在css中写一个$(function(){ $.fn.fixMe = function () { return this.each(function () { var $this = $(this), $t_fixed; function init() { $this.wrap('<div class="container" />'); $t_fixed = $this.clone(); $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this); resizeFixed(); } function resizeFixed() { $t_fixed.find("th").each(function (index) { $(this).css("width", $this.find("th").eq(index).innerWidth() + "px"); }); } function scrollFixed() { var offset = $(this).scrollTop(), tableOffsetTop = $this.offset().top, tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(); if (offset < tableOffsetTop || offset > tableOffsetBottom) { $t_fixed.hide(); } else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) { $t_fixed.show(); } var tboffBottom = (parseInt(tableOffsetBottom) ); var tboffTop = (parseInt(tableOffsetTop)); if (offset >= tboffBottom && offset <= tableOffsetBottom) { $t_fixed.find("th").each(function (index) { $(this).css("width", $this.find("th").eq(index).outerWidth() + "px"); }); } } $(window).resize(resizeFixed); $(window).scroll(scrollFixed); init(); }); }; $("table").fixMe(); });

以下是您想要的 Working Fiddle 。

我已经为它编写了一些 jQuery代码，你可以使用它。

<强>的jQuery

<sigaction.h>

希望这会对你有所帮助。

Answer 3

这是一种纯粹的CSS方式，可以在不使用插件或库的情况下使表格可滚动，它使用table-layout：fixed来固定标题。看看这个例子，meybe就是你想要的。

.fixed_headers {
   width: @table_width;
   table-layout: fixed;
   border-collapse: collapse;

查看此codepen链接中tabe的完整代码

https://codepen.io/tjvantoll/pen/JEKIu

滚动时锁定表格标题（ColResizable）

3 个答案: