将表格调整到屏幕之外

Resize table beyond screen

本文关键字：屏幕 表格 调整      更新时间：2023-09-26

我写了一些代码，允许用户通过单击第一行的列边界来调整每一列的大小（很像Excel）。

我的问题是：我就是不能把桌子做得比窗户大。相反，当我尝试此操作时，其他列会收缩。我相信一定有一些CSS技巧可以做到这一点，但就是找不到

我做了一把小提琴。

此外，我认为使用event.preventDefault可以在调整列大小时停止选择文本（如果光标悬停在第一行的下方或上方）。但它不起作用。有什么想法吗？或者我该怎么做？提前感谢！

我的代码：

function getMousePos(table, evt) {
  var rect = table.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}
var row1x = null,
  row1col = null,
  row1colW = null;
function row1MouseDown(e) {
  if (row1x == null) {
    var table = document.getElementById('tblMain');
    var pos = getMousePos(table, e);
    var N = table.rows[0].cells.length;
    var gap = 5;
    var i, w, ww = 0;
    for (i = 0; i < N; i++) {
      w = table.rows[0].cells[i].offsetWidth;
      ww += w;
      if ((pos.x > ww - gap) && (pos.x < ww + gap)) {
        row1x = pos.x;
        row1col = i;
        row1colW = table.rows[0].cells[i].offsetWidth;
      }
    }
  }
}
function row1MouseUp(e) {
  row1x = null;
  row1col = null;
  row1colW = null;
}
function row1MouseMove(e) {
  var table = document.getElementById('tblMain');
  var pos = getMousePos(table, e);
  var gap = 5;
  var i, w, ww = 0;
  var N = table.rows[0].cells.length;
  if (row1x == null) {
    var row1 = document.getElementById('tr1Main');
    row1.style.cursor = 'default';
    for (i = 0; i < N; i++) {
      w = table.rows[0].cells[i].offsetWidth;
      ww += w;
      if ((pos.x > ww - gap) && (pos.x < ww + gap)) {
        row1.style.cursor = 'ew-resize';
      }
    }
  } else {
    var width = row1colW - row1x + pos.x;
    table.rows[0].cells[row1col].style.width = width + 'px';
    e.preventDefault();
  }
}
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
<body onMouseMove='row1MouseMove(event)' onMouseUp='row1MouseUp(event)'>
  <p>&nbsp;</p>
  <table id='tblMain'>
    <tr id='tr1Main' onMouseMove='row1MouseMove(event)' onMouseDown='row1MouseDown(event)' onMouseUp='row1MouseUp(event)'>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </table>
</body>

编辑：JavaScript中的以下更改是迄今为止我所做的最好的更改，但仍然远远不够好。桌子超出了屏幕的尽头，但出现了一些小故障。

function row1MouseMove(e) {
    var table = document.getElementById('tblMain');
    var pos = getMousePos(table,e);
    var gap = 5;
    var i, w, ww=0;
    var N = table.rows[0].cells.length;
    if (row1x == null) {
        var row1 = document.getElementById('tr1Main');
        row1.style.cursor = 'default';
        for (i=0; i<N; i++) {
            w = table.rows[0].cells[i].offsetWidth;
            ww += w;
            if ((pos.x > ww-gap) && (pos.x < ww+gap)) {
                row1.style.cursor = 'ew-resize';
            }
        }
    } else {
        var width = row1colW - row1x + pos.x;
        table.rows[0].cells[row1col].style.width = width + 'px';
        for (i=0; i<N; i++) {
            if (i == row1col) {
                ww += width;
            } else {
                ww += table.rows[0].cells[i].offsetWidth;
            }
        }
        table.style.width = ww + 'px';
    }
}

默认情况下，表将在窗口外溢出。一些需要查找和调整的CSS规则是：

table-layout:overflow:

相关文章：