具有使用百分比宽度的可调整大小的列的 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;
});

它是如何工作的

它应该如何行动

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

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