将表格调整为超出屏幕

我已经编写了一些代码，允许用户通过单击第一行的列边框（非常类似于Excel）来调整每列的大小。将表格调整为超出屏幕

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

我做了一个jsfiddle。

此外，我认为使用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'; 
    } 
}

来源

2015-12-29 Rodrigo

'表{宽度：200％; ''对我来说工作得很好。只要记住也有这个规则：'html，body {width：100％; }' – lleaff

@lleaff如果我这样做，表开始太大！ – Rodrigo

然后相应地调整内部行，例如：'tr {width：50％; }' – lleaff

默认情况下，表格将在窗口外溢出。一些CSS规则，寻找和调整有：

table-layout: overflow:

来源

2016-07-18 18:22:35

将表格调整为超出屏幕

回答

相关问题