I am printing an HTML table that varies in length. When printing table, it may print 1 page to 10 pages. Is there any way to limit printing to 1 page only using programming code? Yes, there is an option in the browser print dialog to set printing for 1 page only (this is last option to opt).
I'm printing the HTML using window.print() method.
You could try setting some print CSS like this:
@media print {
html, body {
height:100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
}
The basic idea is to have the page just 100% height and hide the overflow. This should also allow to show only content of the height of 100% of the page = one page.
EDIT:
Based on your comment you could probably show for example five different tables on separate tables like this:
@media print {
table { /* Or specify a table class */
max-height: 100%;
overflow: hidden;
page-break-after: always;
}
}
The page-break-after will tell the browser to make a page break after each table. In this case you need to discard the CSS styles set above for html and body. Also each table is limited to 100% height of a page.
It's hard to include an example in these snippets iframes but here's a code you can try it with if you just save it as a html file.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style>
table {
width: 100%;
border: 2px solid black;
}
@media print {
table {
max-height: 100%;
overflow: hidden;
page-break-after: always;
}
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h2>Table 1</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
<table>
<tr>
<td>
<h2>Table 2</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
<table>
<tr>
<td>
<h2>Table 3</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
</body>
</html>EDIT 2:
IE seems to have trouble with the above examples as it has always trouble with the common sense. You can include IE specific fixes or set these on all browsers but here's a working example also for IE. The main thing here is to play with the @page attribute and it's size + margins. I don't have the time to look at this with time right now but hopefully this helps you.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style>
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
table {
cell-padding: 0;
cell-spacing: 0;
width: 100%;
border: 2px solid black;
}
@page {
size: A4;
margin: 0;
}
@media print {
table {
max-height: 100% !important;
overflow: hidden !important;
page-break-after: always;
}
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h2>Table 1</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
<table>
<tr>
<td>
<h2>Table 2</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
<table>
<tr>
<td>
<h2>Table 3</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
</body>
</html>
