如何制作可通過按鈕（javascript）調整為可見窗口大小的HTML表？

Question

我有一張桌子（決定將上一個問題中的所有內容都扔掉，並繪制一張普通的舊桌子），只需單擊一個調用javascript函數的按鈕，就可以在頁面上調整其大小。

桌子可能很小，也可能很大，遠遠大於頁面。

我需要有一個按鈕，當單擊該按鈕時，它會將表格的大小重新調整為可見窗口的大小 。 還有另一個按鈕可以將表格的大小恢復到原來的大小。

表格的制作方法如下：

<table  id=resizableTable cellpadding='5' cellspacing='0' border='0' width: '75%'  leftmargin='50' >

如何獲得可見的窗口區域：

var visHeight = window.innerHeight;
var visWidth = window.innerWidth;

我在javascript中嘗試了以下方法：

1）

document.getElementById('resizableTable').max-width = visWidth + 'px'; 
document.getElementById('resizableTable').max-height = visHeight + 'px';

2）

document.getElementById('resizableTable').style.width = visWidth + 'px';
document.getElementById('resizableTable').style.height = visHeight + 'px';

3）

jQuery('#resizableTable').css('width',visWidth + 'px');
jQuery('#resizableTable').css('height',visHeight + 'px');

但是這些都不起作用-實際上，桌子的尺寸根本沒有改變！ 我究竟做錯了什么？ 我什至無法將表調整為原始大小，因為我一直卡在這部分上。

Answer 1

將寬度和高度設置為百分比。 例如：

var b = true;
document.getElementById('button').onclick = function() {
    if (b = true) {
    document.getElementById('resizableTable').style.width = '100%';
    document.getElementById('resizableTable').style.height = '100%';
    } else {
    document.getElementById('resizableTable').style.width = '1080px';
    document.getElementById('resizableTable').style.width = '720px';
}}

Answer 2

這是一塊

<button class="on">Full</button>
<button class="off">Normal</button>

<table id="resizableTable">
  <tr>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>

  ...more data...

</table>

---

table {
  width: 70%;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

---

$(function() {
  $('.on').click(function() {
    $('#resizableTable').css({ 
        width: $(window).innerWidth() + 'px', 
        height: $(window).innerHeight() + 'px'
    });
  });
  $('.off').click(function() {
    $('#resizableTable').css({ 
        width: '70%', 
        height: 'auto'
    });
  });
});