title: CSS print - stretch table for the entire page (height = 100%)
body: <p>Basically, what I am trying to is to spread a table to fill the rest of the page in print mode. I've surfed the internet, examined <a href="https://stackoverflow.com/questions/15376558/how-to-fill-100-of-remaining-height">this post</a>, and yet after two hours can't figure out what I am doing wrong. The idea is that the table should take up the rest of the page</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector("#print").addEventListener("click", function() {
    //var html = "&lt;div&gt;Test assignment&lt;/div&gt;";
    //$('.test').html(html);
    window.print();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media print {
    body * {
      visibility: hidden;
    }
   
    #print-wrapper * {
      visibility: visible;
    }
    .my-table {
      width: 100%;
      height: 100%;
      border: solid;
  table-layout: fixed;
    }
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" value="print" id="print"&gt;
  &lt;div id="print-wrapper"&gt;
    &lt;div class="print-heading"&gt;My table
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div class="print-week-heading"&gt;Some heading&lt;/div&gt;
      &lt;table class="my-table"&gt;
        &lt;tr&gt;
          &lt;td&gt;
            A
          &lt;/td&gt;
          &lt;td&gt;
            B
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            C
          &lt;/td&gt;
          &lt;td&gt;
            D
          &lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>