JSFiddle - React, Tailwind, and code Playground

HTML

<button id="print" onclick="printpage()">Click Here</button>
<br/><br/>
<table border="1" width="100%" cellspacing="0" cellpadding="4px" >
       <thead id="headerRow">
           <tr>
        <th width="50%">Sl.No.</th>
        <th width="50%">Value</th>
        </tr>
    </thead>
    <tbody>
        <script type="text/javascript" >
				for(i = 1; i < 100; i++){
					document.write('<tr id="SlNo-'+i+'">')
					document.write('<td> ' + i + '</td>')
            	document.write('<td>Value -  ' + i + '</td>')
                    document.write('</tr>')
            }
		</script>
    </tbody>
</table>


<script>
function printpage(){
    var data = '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><style type="text/css" media="print">#headerRow {display:table-header-group;} tbody {display:table-row-group;} .noprint {visibility: hidden;} </style><div class="container"><br/><div class="row"><div class="col-xs-3 text-center">My Logo</div><div class="col-xs-9 text-center">Table Header</div></div><table border="1" width="100%" cellspacing="0" style=" border: 1px solid black">' +document.getElementsByTagName('table')[0].innerHTML + '</table></div>';    
 myWindow=window.open('','','width=800,height=600,scrollbars=yes');
   
    myWindow.document.write(data);
	myWindow.document.close(); 
    myWindow.focus();
}
    </script>