Question

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

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

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

任何人都可以告诉我如何以百分比宽度实现此功能而没有任何错误行为吗？

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

具有百分比宽度的可调整大小列的HTML表

2 个答案: