如何制作可通过按钮（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'
    });
  });
});