Question

我编写了一些代码，允许用户通过点击第一行的列边框来调整每列的大小（非常类似于Excel）。

我的问题是：我不能让桌子大于窗户。相反，当我尝试这个时，其他列会缩小。我相信必须有一些CSS技巧才能做到这一点，但却无法找到它。

我做了jsfiddle。

另外，我认为使用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(); } }我可以在调整列的大小时停止选择文本（如果光标悬停在第一行的下方或上方）。但它没有用。有什么想法吗？或者我该怎么办？提前谢谢！

我的代码：

＆＃13;

table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

编辑：JavaScript中的以下更改是我迄今为止所做的最好的，但仍远远不够好。该表超出了屏幕的末尾，但有一些故障。

{{1}}

Answer 1

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

>>> a = (10**6*numpy.array([355, 355, 373, 373, 373, 373, 373])).reshape(-1, 1).tolist() >>> a [[355000000], [355000000], [373000000], [373000000], [373000000], [373000000], [373000000]] table-layout:

调整屏幕外的表格大小

1 个答案: