how to print 3 table in each A4 paper ( in html content )

Question

I want to print 3 tables in each A4 paper. My Html code is this:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style type="text/css">
        <!--
        body,td,th {
            font-family: tahoma;
            color: #333333;
            -webkit-print-color-adjust: exact;
        }
        body {
            font-size:4.5mm;
            margin-left: 2mm;
            margin-top: 2mm;
            margin-right: 2mm;
            margin-bottom: 2mm;     
        }
        @page {
        width:210mm;
        height:297mm;

           padding:0px;
           margin:0px;
           -webkit-print-color-adjust: exact;




        }
        #container{
        border:1mm #000000 solid; float:left; height:80mm;
        width:195mm; margin-bottom:2mm;
        }
        -->
        </style>
        </head>

        <body>
        <div id="container">Some Text
          <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
            <div align="left" style="float:left; width:100%" id="namekhoda">
              <div align="center" style="width:33%; float: left">Text</div>
              <div style="width:33%; float:left" align="center"></div>
            </div>  
          </div>
          <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
          </div>
        </div>
        <div id="container">Some Text
          <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
            <div align="left" style="float:left; width:100%" id="namekhoda">
              <div align="center" style="width:33%; float: left">Text</div>
              <div style="width:33%; float:left" align="center"></div>
            </div>  
          </div>
          <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
          </div>
        </div>
        <div id="container">Some Text
          <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
            <div align="left" style="float:left; width:100%" id="namekhoda">
              <div align="center" style="width:33%; float: left">Text</div>
              <div style="width:33%; float:left" align="center"></div>
            </div>  
          </div>
          <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
          </div>
        </div>
        <div id="container">Some Text
          <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
            <div align="left" style="float:left; width:100%" id="namekhoda">
              <div align="center" style="width:33%; float: left">Text</div>
              <div style="width:33%; float:left" align="center"></div>
            </div>  
          </div>
          <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
          </div>
        </div>
        <div id="container">Some Text
          <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
            <div align="left" style="float:left; width:100%" id="namekhoda">
              <div align="center" style="width:33%; float: left">Text</div>
              <div style="width:33%; float:left" align="center"></div>
            </div>  
          </div>
          <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
          </div>
        </div>
        <div id="container">Some Text
          <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
            <div align="left" style="float:left; width:100%" id="namekhoda">
              <div align="center" style="width:33%; float: left">Text</div>
              <div style="width:33%; float:left" align="center"></div>
            </div>  
          </div>
          <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
          </div>
        </div>
        <div id="container">Some Text
          <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
            <div align="left" style="float:left; width:100%" id="namekhoda">
              <div align="center" style="width:33%; float: left">Text</div>
              <div style="width:33%; float:left" align="center"></div>
            </div>  
          </div>
          <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
          </div>
        </div>
        <div id="container">Some Text
          <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
            <div align="left" style="float:left; width:100%" id="namekhoda">
              <div align="center" style="width:33%; float: left">Text</div>
              <div style="width:33%; float:left" align="center"></div>
            </div>  
          </div>
          <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
          </div>
        </div>
        <div id="container">Some Text
          <div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
            <div align="left" style="float:left; width:100%" id="namekhoda">
              <div align="center" style="width:33%; float: left">Text</div>
              <div style="width:33%; float:left" align="center"></div>
            </div>  
          </div>
          <div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
          </div>
        </div>
        </body>
        </html>

In print preview some pages are correct ( 3 tables in A4 page ) and some pages are wrong ( more/least than 3 tables in A4 page ) I want to print exactly 3 tables in each A4 page.

Excuse me for my English.

Please guide me with code.

Seems related to this: http://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table — Nishant, May 21 '15 at 10:00

score 0 · Answer 1 · answered May 21 '15 at 10:00

0

How are you trying to printing it - @page property might not be supported by all browsers. You could use an HTML to PDF converter like Weasyprint where you can supply your HTML and generate a PDF which you could print. You need to do this after each table(assuming the table itself is less than a A4 sheet):

<div style="page-break-after:always"></div>

answered May 21 '15 at 10:00

Nishant

20,354
18
69
101

1

how can know the table itself is less than a A4 sheet?? – nancy tyler May 21 '15 at 10:22
image the user use a browser that support @page – nancy tyler May 21 '15 at 10:24
If it supports @page, then you need to check those properties are correct. Also if the table is big in browser like more than a page then it is more than a page. – Nishant May 21 '15 at 10:31

how to print 3 table in each A4 paper ( in html content )

1 Answers1