How to make HTML table that can be resized to the visible window with button (javascript)?

Question

I have a table (decided to throw everything from my previous question out and have it draw a plain old table) that needs to be able to be re-sized on the page at the click of a button that calls a javascript function.

The table could be small or it could be huge - far bigger than the page.

I need to have a button that will re-size the table to the size of the visible window when clicked. And another button that will put the size of the table back to as big as it was.

This is how the table is made:

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

How I get the visible window area:

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

I tried the following in 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');

But none of these work -- in fact, the table doesn't change in size at all! What am I doing wrong? I haven't even been able to work on the resizing the table back to the original size yet because I've gotten stuck on this part.

Answer 1

Set the width and height to percentages. For example:

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

Here's a FIDDLE

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