CSS print - stretch table for the entire page (height = 100%)

Question

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 this post, 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

document.querySelector("#print").addEventListener("click", function() {
  //var html = "<div>Test assignment</div>";
  //$('.test').html(html);
  window.print();
});

@media print {
  body * {
    visibility: hidden;
  }
 
  #print-wrapper * {
    visibility: visible;
  }
  .my-table {
    width: 100%;
    height: 100%;
    border: solid;
table-layout: fixed;
  }
  
}

<input type="button" value="print" id="print">
<div id="print-wrapper">
  <div class="print-heading">My table
  </div>
  <div>
    <div class="print-week-heading">Some heading</div>
    <table class="my-table">
      <tr>
        <td>
          A
        </td>
        <td>
          B
        </td>
      </tr>
      <tr>
        <td>
          C
        </td>
        <td>
          D
        </td>
      </tr>

    </table>
  </div>
</div>

Answer 1

You can use vh units to adjust the table's height.

@media print {
  .my-table {
    height: 90vh; 
  }
}

90vh equates to 90% of the height of the page, so adjust this as necessary.

Added code snippet:

document.querySelector("#print").addEventListener("click", function() {
  //var html = "<div>Test assignment</div>";
  //$('.test').html(html);
  window.print();
});

@media print {
  body * {
    visibility: hidden;
  }
 
  #print-wrapper * {
    visibility: visible;
  }
  .my-table {
    width: 100%;
    height: 90vh;
    border: solid;
    table-layout: fixed;
  }
  
}

<input type="button" value="print" id="print">
<div id="print-wrapper">
  <div class="print-heading">My table
  </div>
  <div>
    <div class="print-week-heading">Some heading</div>
    <table class="my-table">
      <tr>
        <td>
          A
        </td>
        <td>
          B
        </td>
      </tr>
      <tr>
        <td>
          C
        </td>
        <td>
          D
        </td>
      </tr>

    </table>
  </div>
</div>