JSFiddle - React, Tailwind, and code Playground

HTML

<script>
function printPage() {
    window.print();
}
</script>
<body>
<button onclick = "printPage()">
print
</button>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->

<tr>
            <td>x</td>
        </tr>
<div class = "print">
  end of page
</div>
<!--some other stuff that will be printed on the next page -->

    </tbody>
    
    </table>
    <footer>footer</footer>
<h3>
new page?
</h3>    
</body>
</html>

CSS

@media print {
    footer {page-break-after: always;}
}