April 3, 2012

Printing HTML page

Question by Java

I have a very long table in my webpage. When I print it, it looks that the last row of the table is in the one page ( only in the top of the page ). The rest of the page is blank. On the next page I have nest table. I do not know, why next table is not in the bottom of the last row of first page.

In HTML looks in following way:

<table align="left" cellspacing="0" cellpadding="0" border="1">
  <thead>
    <tr>....</tr>
  </thead>
  <tbody>
    <tr>...</tr>
  </tbody>
</table>

<table align="center" width="800" cellspacing="0" cellpadding="0" border="1" style="margin: 0 auto 0 auto; page-break-inside: avoid;">
  <tbody>
    <tr>
      <td align="left" width="200">xxx</td>
      <td align="right" width="200">xxx</td>
      <td align="right" width="200">xxx</td>
      <td align="right" width="200">x</td>
    </tr>
    <tr>
      <td align="left" width="200">
      <td align="right" width="200">
      <td align="right" width="200">
      <td align="right" width="200">
    </tr>
    <tr></tr>
</table>

CSS:

background-color: white;
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0;
font-size: 10px;
vertical-align: middle;

Answer by Starx

You can control the style-sheet used for print separately using

@media print {
   ....
}

Since you table is breaking inside, you can disable that using

@media print {
   table {
       page-break-inside: avoid;
   }
}

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!