Menu
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.
278
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>Following is the simple code that demonstrate scrolling in print pages. If you set height: 100% it will print one page, if height: 200% it will print two pages and so on, best solution is to provide page breaks on div's which you want to move to new pages.
<html>
<head>
<style>
@media print {
.parent {
overflow: scroll;
display: block;
}
.pb_after { page-break-after: always !important; }
}
</style>
<script>
setTimeout(function() {
window.print();
}, 3000);
</script>
</head>
<body>
<div class="parent">
<div class="pb_after">
Amit
</div>
<div>
Parrikar
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
