JSFiddle - React, Tailwind, and code Playground

HTML

<script>
		function printTable(){
			var tables = createTables(6);
			$("#printTables").html(tables);	
		}
				
		function createTables(rowsPerTable){			
			var rowsInParentTable  = $( "tbody tr" ).toArray();					
			var subTable = "<table>", subRows=[], sr = 0;			
			for(i=0; i < rowsInParentTable.length; i++){				
				subTable += "<tr>" + rowsInParentTable[i].innerHTML + "</tr>";
				if( i % rowsPerTable === 0 && (i > rowsPerTable || i +1 > rowsPerTable ) ){
					subTable += "</table> <hr /> <table>";
				}
			}
			return subTable;
		}  
</script>


		<h1>Print n rows of a table on each page<h1>
        <h2>CSS Page-Break not Working in all Browsers!</h2>
		<ul>
			<li><a href="http://stackoverflow.com/questions/18029900/gridview-printing-with-page-break">reference 1</a>
			<li><a href="http://stackoverflow.com/questions/18029900/gridview-printing-with-page-break">reference 2</a>
		</ul>       
		<div>
            <p>This code below split a table with 6 rows into 4 individual tables </p>
		  <table id="sourceTable">
		   <tbody>
			<tr><td>1 Browser</td><td>Version</td><td>Support for 'page-break-after' </td></tr>
			<tr><td>2 Internet Explorer</td><td>10</td><td>works for table rows</td></tr>				
			<tr><td>3 Fire Fox</td><td>22</td><td>works for table rows</td></tr>				
			<tr><td>4 Chrome</td><td>30</td><td>does not work</td></tr>
			<tr><td>5 Safari</td><td>?</td><td>?</td></tr>
			<tr><td>6 Opera</td><td>?</td><td>?</td></tr>
			<tr><td>1 Browser</td><td>Version</td><td>Support for 'page-break-after' </td></tr>
			<tr><td>2 Internet Explorer</td><td>10</td><td>works for table rows</td></tr>				
			<tr><td>3 Fire Fox</td><td>22</td><td>works for table rows</td></tr>				
			<tr><td>4 Chrome</td><td>30</td><td>does not work</td></tr>
			<tr><td>5 Safari</td><td>?</td><td>?</td></tr>
			<tr><td>6 Opera</td><td>?</td><td>?</td></tr>
			<tr><td>1 Browser</td><td>Version</td><td>Support for 'page-break-after' </td></tr>
			<tr><td>2 Internet...

CSS

.focusTest { border: 1px solid red;}
.onBlurTest { border: 1px solid blue;}
.hasFocus { background-color: rgb(170, 233, 170);}
.hasLostFocus { border: 3px solid red;}

div.print table {  border-collapse:collapse; }
div.print table, div.print  th, div.print  td { border: 1px solid blue; }
hr {page-break-after: always;}