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

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

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

---

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

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

---

来源：

我创建了一个列大小调整表，初始宽度为百分比。 调整列的大小时，可以先获取列的PX，然后根据整个表的宽度将其转换为百分比。

---

欢迎来到StackOverflow。请你详细说明一下童车的概念好吗？与你希望它做的相比，它到底做了什么是错误的…@elbrant我添加了两个GIF，这表明我对buggy的意思很难描述，它应该是什么样子的。这很可能是因为你从TD width获得pos，而不是它的父母TR或表。因此，它与td有关。例如，如果你的鼠标在TD的40%上，它认为它在trtable的40%上。我发现它的车少了一点，但仍然不完美：

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;
});

    $("table").resizableColumns();