css - Make html with specific size paper on html

I have table tag html where the tr and td is loop by array. I need to print the table with specific size paper. i already using :

@page {
    size: A4;
    margin: 0;
  }

  @media print {
    html,
    body {
      width: 16cm;
      height: 21cm;
    }
  }

But, i have many data to loop, so it still print like more than size of html.

i need to print only 4 row and 3 column every paper so only total 1 one paper 12 column. could you help me to make only print in 12 column?

I have table tag html where the tr and td is loop by array. I need to print the table with specific size paper. i already using :

@page {
    size: A4;
    margin: 0;
  }

  @media print {
    html,
    body {
      width: 16cm;
      height: 21cm;
    }
  }

But, i have many data to loop, so it still print like more than size of html.

i need to print only 4 row and 3 column every paper so only total 1 one paper 12 column. could you help me to make only print in 12 column?

Share Improve this question asked 12 hours ago user3505775 3372 gold badges6 silver badges20 bronze badges

use css break-after to break the page after the desired line. – mr mcwolf Commented 10 hours ago
@mrmcwolf i already add <pega:when java='<%= loop%13==0 %>'> <td style="height:128.5px;width:150.5pt; padding-right:5.4pt; padding-left:5.4pt; vertical-align:top;text-align:center;break-after: page;"> but nothing changed, it still in one page – user3505775 Commented 8 hours ago
jsfiddle.net/sm3wcaph By the way, it's a good idea not to use table because it will be difficult to modify the table if you are displaying the content on mobile devices. – mr mcwolf Commented 6 hours ago
break-after applies to block-level elements only - which td are not. – C3roe Commented 5 hours ago
@mrmcwolf – The HTML is used for PDF generation exclusively, so your considerations regarding mobile devices are true, but irrelevant here. – tquadrat Commented 4 hours ago

Add a comment |

2 Answers 2

Sorted by: Reset to default 0

Not using <table> at all is a good advice. Or use it only in the way that each line is a table on its own, with just one single row.

PD4ML will then do the pagination properly.

Save this snippet in HTML file. It worked for me as local HTML file. (Error with snipped demo).

function print_list(){
var eachPageMaxCol=3;
var eachPageMaxRow=4;
var x=document.getElementsByClassName("printObject");
var l=x.length;
var rowConter=0;
var res="";
res+="<div align='center'><table border='1' style='break-after: page;'>";
for(var cnt=0;cnt<l;cnt++){
res+="<tr>";
for(let c=0;c<eachPageMaxCol && cnt<l;c++,cnt++){
res+="<td align='center' style='min-width:140px;height:40px;'>"+x[cnt].innerHTML+"</td>";
}
res+="</tr>";
if(cnt>=l){res+="</table>";break;}
else if(++rowConter>=eachPageMaxRow){rowConter=0;res+="</table>"+"</br></br></br></br>"+"<table border='1' style='break-after: page;'>";}
cnt--;
}

var printdlg = window.open('', 'PRINT', 'height=400,width=400');
printdlg.document.write(res);
printdlg.document.close(); 
printdlg.focus();

printdlg.print();

printdlg.close();
}

<body>

<table border='1'>
<tr>
<td align='center' class='cellcls printObject'>0</td>
<td align='center' class='cellcls printObject'>1</td>
<td align='center' class='cellcls printObject'>2</td>
</tr>
<tr>
<td align='center' class='cellcls printObject'>3</td>
<td align='center' class='cellcls printObject'>4</td>
<td align='center' class='cellcls printObject'>5</td>
</tr>
<tr>
<td align='center' class='cellcls printObject'>6</td>
<td align='center' class='cellcls printObject'>7</td>
<td align='center' class='cellcls printObject'>8</td>
</tr>
<tr>
<td align='center' class='cellcls printObject'>9</td>
<td align='center' class='cellcls printObject'>10</td>
<td align='center' class='cellcls printObject'>11</td>
</tr>
<tr>
<td align='center' class='cellcls printObject'>12</td>
<td align='center' class='cellcls printObject'>13</td>
<td align='center' class='cellcls printObject'>14</td>
</tr>
<tr>
<td align='center' class='cellcls printObject'>15</td>
<td align='center' class='cellcls printObject'>16</td>

</tr>
</table>

<button onclick="print_list();"/>print</button>

</body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

css - Make html with specific size paper on html - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)