Page Breaks in Table in newWindow

Question

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");

   newWin= window.open("");

   newWin.document.write(divToPrint.outerHTML);

   newWin.print();

   newWin.close();

  }

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

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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

divToPrint.style.pageBreakInside = "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");
   divToPrint.style.pageBreakInside = "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 = window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

Page Breaks in Table in newWindow

Sign up