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;
}
}
