title: how pass content in new page when printing page
body: <p>I <a href="https://i.stack.imgur.com/egdrg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/egdrg.png" alt="enter image description here"></a></p>
  
  <p>See above my page structure but I when I printed  multiple  student details  it doesnot show on seperate page I tried using  </p>
  
  <pre><code> page-break-inside:avoid;page-break-after:auto; 
  </code></pre>
  
  <p>but it will not work </p>
  
  <p>Follwing my javascript sample code </p>
  
  <pre><code>     table += '&lt;table style="width: 90%"&gt;&lt;tr&gt;&lt;td style="width: 5%;"&gt;&lt;b&gt;SR. NO.&lt;/b&gt;&lt;/td&gt;&lt;td style="width: 15%;"&gt;&lt;b&gt;COURSE CODE&lt;/b&gt;&lt;/td&gt;&lt;td align="center"&gt;&lt;b&gt;COURSE NAME&lt;/b&gt;&lt;/td&gt;&lt;td style="width: 15%;"&gt;&lt;b&gt;GRADE&lt;/b&gt;&lt;/td&gt;&lt;td style="width: 15%;"&gt;&lt;b&gt;COURSE CREDITS&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;';
      table += SubCal + '&lt;/table&gt;';
       table += '&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style="height: 5%; border: none; font-size: 12px;"&gt;';
         table += '&lt;table border="1" style="width: 99.70%"&gt;&lt;tr&gt;&lt;td colspan="3" align="center"&gt;&lt;b&gt;TRIMESTER PERFORMANCE INDEX (TPI)&lt;/b&gt;&lt;/td&gt;&lt;td colspan="3" align="center"&gt;&lt;b&gt;CUMULATIVE PERFORMANCE INDEX (CPI)&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td align="center" style="width: 16%;"&gt;CREDITS&lt;/td&gt;&lt;td align="center" style="width: 20%;"&gt;EARNED GRADE POINTS&lt;/td&gt;&lt;td align="center" style="width: 16%;"&gt;TPI&lt;/td&gt;&lt;td align="center" style="width: 16%;"&gt;EARNED CREDITS&lt;/td&gt;&lt;td align="center" style="width: 20%;"&gt;EARNED GRADE POINTS&lt;/td&gt; &lt;td align="center" style="width: 16%;"&gt;CPI&lt;/td&gt;&lt;/tr&gt;';
   table += '&lt;tr&gt;&lt;td align="center"&gt;' + e.d[a].Term_Credits + '&lt;/td&gt;&lt;td align="center"&gt;' + e.d[a].Total_Earned_Credits + '&lt;/td&gt; &lt;td align="center"&gt;' + e.d[a].Tpi + '&lt;/td&gt;&lt;td align="center"&gt;' + e.d[a].Total_Credits + '&lt;/td&gt;&lt;td align="center"&gt;' + e.d[a].Earned_Grd_Points + '&lt;/td&gt;&lt;td align="center"&gt;' + e.d[a].Cpi + '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
   table += '&lt;div style=" page-break-after: always;"&gt;';
   document.getElementById("tbl_Master").innerHTML = table;
  </code></pre>
  
  <p>my html part </p>
  
  <pre><code> &lt;div id="tbl_Master"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>.    </p>
  
  <pre><code>page-break-after: always;  
  it will work for only html but  when I am passing data using javascript dynamically not working for me
  </code></pre>