Eric Hamm Eric Hamm - 8 months ago 35
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



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