具有使用百分比宽度可调整大小列的 HTML 表格答案

【问题标题】：HTML table with resizable columns using percentage width具有使用百分比宽度可调整大小列的 HTML 表格
【发布时间】：2019-01-14 23:30:58
【问题描述】：

有很多可调整大小的表格的解决方案。但它们都有一个共同点，那就是它们都使用像素宽度而不是百分比宽度。

在我的用例中，我的表格 col 宽度需要具有百分比宽度，或者在调整大小操作后至少设置为百分比宽度。我实施的解决方案在开始调整大小时出现问题。

http://jsfiddle.net/bg843pkt/24/

var thElm;
var startOffset;

var eG;

Array.prototype.forEach.call(
  document.querySelectorAll("table th"),
  function (th) {
    th.style.position = 'relative';

    var grip = document.createElement('div');
    grip.innerHTML = "&nbsp;";
    grip.style.top = 0;
    grip.style.right = 0;
    grip.style.bottom = 0;
    grip.style.width = '5px';
    grip.style.position = 'absolute';
    grip.style.cursor = 'col-resize';
    grip.addEventListener('mousedown', function (e) {
        thElm = th;
        startOffset = th.offsetWidth - e.pageX;
    });

    th.appendChild(grip);
  });

document.addEventListener('mousemove', function (e) {
  if (thElm) {
    thElm.style.width = startOffset + e.pageX + '%';
    eG = e.pageX;
  }
});

document.addEventListener('mouseup', function () {
    thElm = undefined;
});

How it acts

How it should act

谁能告诉我如何在没有任何错误行为的情况下以百分比宽度实现此功能？

【问题讨论】：

欢迎来到 StackOverflow。请您详细说明“越野车”的概念吗？与您希望它做的相比，它到底在做什么是错误的......
@elbrant 我添加了两个 gif 图像，它们展示了我对 buggy 的意思（对我来说很难描述）以及它应该如何表现。
这很可能是因为您从 TD 宽度而不是其父项（TR 或 Table）获取 pos。所以它与 td 相关。例如，如果您的鼠标位于 TD 的 40%，它认为它位于 tr(table) 的 40%。
我的问题少了一点，但仍然不完美：jsfiddle.net/Ln280eqc/8

标签： javascript html-table percentage resizable

【解决方案1】：

我创建了一个工作示例，但它使用的是较旧的 jQuery 版本。

http://jsfiddle.net/Ln280eqc/17/

    $("table").resizableColumns();

来源：https://github.com/dobtco/jquery-resizable-columns

【讨论】：

【解决方案2】：

我创建了调整列大小的表格，初始宽度是百分比。调整列大小时，可以先获取该列的PX，然后根据整个表格的宽度将其转换为百分比。 https://biechao.github.io/2019/11/20/storybook-static/?path=/story/table--resizable-column-table

【讨论】：