Question

我需要实现一个表，在该表中既可以调整列的大小又可以滚动到正文中（如here所示）。我目前正在使用colResizable来调整列的大小，但无法找到一种使主体可滚动并仍然保持列可调整大小的方法。 colResizable仅更改标题的宽度，并期望列的行为相同。

就我的研究而言，只能通过在display: block上设置<tbody>来滚动浏览正文，这最终会破坏colResizable。

可以通过JavaScript更改每次拖动的列宽，但是我宁愿使用html + css唯一的解决方案，因为该表将包含数百甚至不是数千行，并且可能影响性能。

如果你们中的某人知道解决方法，请告诉我。

编辑1：不幸的是，我无法发布与项目相关的任何代码，因为它可能包含机密信息，但我认为仍然不需要，因为此问题并非针对我现有的代码。

编辑2：我忘了提到，我在标题中使用<thead>。正如C4pt4inC4nn4bis所指出的，在不使用<tbody>标签的情况下，可以很容易地调整列的大小并滚动浏览<thead>。因为我希望标题即使在滚动时也保持在表格的顶部，所以我不能简单地将<thead>中的所有内容移动到<tbody>。

Answer 1

如果没有 display:block 选项，就不可能显示 Y 轴滚动。 colResizable 也不支持这种情况。没有，标题不能固定在顶部。

检查此代码。每当调整表头大小时，我都会手动调整列大小。 colResizable 插件中有一个事件处理程序 (onDrag)。

$("table").colResizable({
    liveDrag: true,
    onDrag: function (e) {
      $("tbody tr td:nth-child(1)").width($("thead th:nth-child(1)").width());
      $("tbody tr td:nth-child(2)").width($("thead th:nth-child(2)").width());
      $("tbody tr td:nth-child(3)").width($("thead th:nth-child(3)").width());
      $("tbody tr td:nth-child(4)").width($("thead th:nth-child(4)").width());
    },
  });

如果您不使用 liveDrag 选项，请使用 onResize 事件处理程序。

希望有帮助。谢谢。

可滚动表格主体中可调整大小的表格列

1 个答案: