使用百分比宽度调整列大小的HTML表格

Question

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

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

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 = " ";
    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

谁能告诉我怎样才能在没有buggy行为的情况下用百分比宽度实现这个功能？

Answer 1

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

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

    $("table").resizableColumns();

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

Answer 2

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