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 }
function PrintData(){
var divToPrint=document.getElementById("Table");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
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}
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();
}