將表格調整爲超出屏幕

我已經編寫了一些代碼，允許用戶通過單擊第一行的列邊框（非常類似於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

將表格調整爲超出屏幕

回答

相關問題