JSFiddle - React, Tailwind, and code Playground

HTML

<div id="printTable">
 <style type="text/css">

        body {
            font-family: verdana, arial, sans-serif ;
            font-size: 12px ;
            }
 
        th,
        td {
            padding: 4px 4px 4px 4px ;
            text-align: center ;
            }
 
        th {
            border-bottom: 2px solid #333333 ;
            }
 
        td {
            border-bottom: 1px dotted #999999 ;
            }
 
        tfoot td {
            border-bottom-width: 0px ;
            border-top: 2px solid #333333 ;
            padding-top: 20px ;
            }
 
    </style>
        <table id="rrr"
            cellspacing="0"
            summary="This is a really long table that is used to demonstrate the print of headers across several pages.">
        <thead>
            <tr>
                <th>
                    ID
                </th>
                <th>
                    Value
                </th>
            </tr>
        </thead>
 
        <!---
            Defint eh FOOTER of the table. This is the data that
            will be displayed at the bottom of every printed page.
        --->
        <tfoot>
            <tr>
                <td colspan="2">
                    Kinky Solutions Table Demo
                </td>
            </tr>
        </tfoot>
 
        <!--- Define the BODY of the table. This is the data. --->
        <tbody>
        </tbody>
        </table>
</div>
<br />
<br />

<button>Print me</button>

JavaScript

$(function(){
    for( var i =0; i < 200; i++ ){
        $('#rrr tbody').append('<tr>'+
                            '<td>'+ i + '</td><td>' +( 0.9 * 999999)+
                            '</td></tr>');
        }
});

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})