Eric Hamm Eric Hamm - 10 months ago 40
CSS Question

Page Breaks in Table in newWindow

In the style tabs I have

table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

And when I click the button that triggers print data there are no breaks. Upon thinking about it's a different window. How can I add that bit of CSS to the new window?

function PrintData(){
var divToPrint=document.getElementById("Table");

Edit: Turns out what was making it break right on the ctrl+p print screen was this which is inside the tab


Answer Source

You would need to set the style property on the object. For example, to apply to your table, you would add: = "auto";

You will need to get the tr, thead and tfoot objects and apply the styles you have listed above as well. display is the same and page-break-after is pageBreakAfter.

For table rows, you would do something like:

var trs = divToPrint.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    trs[i].style.pageBreakInside = "avoid";

Here is an edited version of your example. You need to make the changes before you send the HTML to the new window.

function PrintData(){
   var divToPrint = document.getElementById("Table"); = "auto";
   var nTr = divToPrint.getElementsByTagName('TR')
   for(i=0; i<nTr.length; i++){
      nTr[i].style.pageBreakAfter = 'auto';
      nTr[i].style.pageBreakInside = 'avoid';
   var nTh = divToPrint.getElementsByTagName('tHead');
   for(f=0; f<nTh.length; f++){
      nTh[f].style.display = 'table-header-group'
   var nTf = divToPrint.getElementsByTagName('tFoot');
   for(g=0; g<nTf.length; g++){
      nTf[g].style.display = 'table-header-group'
   newWin ="");