JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body onClick="window.print()">

<div class="largeDiv">
Large div
</div>
<!----potentially more content above table------>
<!-----div added to mask it so that title and first few rows are always on the same page---->
<div class="mask">
</div>
<table>
  <caption>Title of table</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td>$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
    <td>$150</td>
  </tr>
</table>
<!----potentially more content below table------>
<div class="fakeContent">
hi
</div>
</body>
</html>

CSS

table {
   position: relative;
    top: -200px;
} 
th, td {
    border: 1px solid black;
}
caption {
  border-bottom: 2px solid red;
  margin-bottom: 20px;
  line-height: 100px;
  font-size: 20px;
}
div.largeDiv {
  height: 920px;
}
div.mask {
  height: 200px;
  width: 200px;
  page-break-inside: avoid;
}
div.fakeContent {
  height: 700px;
}