I have an HTML page displaying content like below:
<html>
<table></table>
<table></table>
<table></table>
</html>
Now I call window.print(), and want each table printed onto the different pages. How can I make this?
PS: Each table may have different height
Put every table in div, and set style to div like this:
<div style="page-break-after:always;">
This "styling" tells the browser that as soon as that div finishes everything after it should start printing on a new page. We could just as well apply the same rule to, say, all the divs on a page by adding the following to its header:
div {
page-break-after : always;
}
However, it's is more likely that you will want to apply breaks only after certain elements rather than after every paragraph. That's why it is probably better to apply the style individually or to a set of elements that you can use selectively like the DIV.
Read this for more info...
Please give Page break style to your table.
table{
page-break-after : auto ;
}
For more info on page break please go to link.
You can use page-break-after CSS property
<style>
#media print
{
table {page-break-after:always}
}
</style>
Always insert a page break after each element (when printing):
#media print {
table{
page-break-after: always;
}
}
The page-break-after property sets whether a page break should occur AFTER a specified element.
Related
This is how my Html page looks in print view.
I need to put it on new page when it breaks in 2 and for that need to insert below div before these elements (something which I am doing for other predefined new pages).
<div style='page-break-before: always'>
But I am not able to do so as these contents are dynamic and I have no idea exactly which HTML element will fall at this place.
If I somehow manage to track HTML element at page break point, I will simply put page-break code just above it. This need to be done on html page with jQuery as print view doesn't support js.
I tried to do it like this but failed here as well. Looks like print view doesn't support position: absolute.
$(document).ready(function(){
$("body").append("<div style='position: absolute;top: 760px;page-break-before: always'>");
});
Try this article
Make Sure You use
#media print {
.page-break { display: block; page-break-before: always; }
}
As page-break-* doesn't work on google chrome, here is the solution which worked for me. I set display: inline-block for all the HTML Element which I don't want to get separated between two pages.
.msgbx,.svnotice, .imgdescbx img {
display: inline-block;
}
I need to create two tables, append them to the page.
When i am just appending two tables:
document.getElementById("list").appendChild(list_table_one);
document.getElementById("list").appendChild(list_table_two);
They placed on page one under another.
How i can put them side by side?
Setting the table's display property to inline-block, or floating the table to one side should allow them to display side-by-side, assuming they are narrow enough.
table {
display: inline-block;
/* or */
float: left;
}
You can set the diplay propert to inline-block
See the example for more details
UPDATE: I add table to show how to configure the css to break lines.
It's important to say that those elements are inside a div, that have a defined width.
I have a Pape width different DIVs and a PRINT link.
I want that if the user clicks on a Print link should
a specific DIV be printed not the whole page.
I think you can use CSS, like so:
#media print {
body * {
display:none;
}
#divToPrint {
display:block;
}
}
but I don't think this is supported on all browsers. The alternative would be to open the contents of the DIV in a new window, and then print that window.
Use print media stylesheets to set everything else to display: none (you'll need to construct your markup in such a way that nothing you want to print is a descendent of something you do want to print).
Toggle class names on the div elements to select which ones get printed.
There is one long in the content on the print page, but while we print the some content of the text cut down.
alt text http://img694.imageshack.us/img694/6766/printpage.jpg
please let me know , if there is any dynamic way to add page-break css. the content could be any thing.
You might also just want to prevent page breaks inside an element.
E.g. short tables that you don't want to get ripped apart when printing:
#media print {
table {
page-break-inside: avoid;
}
}
As Haim Evgi referenced in this article http://davidwalsh.name/css-page-breaks
In addition to what's already described in the article, I would like to point out that it's good practice to use .page-break-before: auto instead of .page-break-before: always. The "auto" will break the page only if the contents are at the end if the page, this will prevent breaking the page and leaving a lot of blank space.
The CSS
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: auto; }
}
The HTML
<div>some content</div>
<div class="page-break">more content, this content may be short or long</div>
<div class="page-break">this content may page-break if content above this <div> is at the end of the page</div>
<div class="page-break">etc,..</div>
Use the css page-break-before and page-break-after elements.
The contents of the following div is derived dynamically: i.e a table is added dynamically to this div with some button.
My question is how to print the content of this div(window.print) and not other things in the page
<div id="newdiv" name="newdiv"></div>
Thanks.
Two ideas:
Introduce a print stylesheet
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
that will give every element display: none except for newdiv:
* { display: none } /* This should hide all elements */
div#newdiv { display: block } /* This should make newdiv visible again */
I can't test this right now but I can't see why this wouldn't work.
Copy the contents of the div into a newly created iframe element using JavaScript and print that.
Lots of obstacles on the road that way, though. I'd try using CSS first.
Clever thinking Pekka, but it doesn't work quite like that, after using a global display:none you would have to redisplay every single element that needs to be displayed, including all parent elements. Best way would be to hide all the elements that should not be printed, good news is that you only need to hide the parent element and everything in it will be hidden.
There is by the way no need for an extra style sheet, a block in an existing sheet can be used (it must be placed at the end of the last sheet):
#media print{
.noprint{
display:none;
}
}
Now a block can be hidden from printing simply by giving its container the noprint class.
Your best bet is to create a media-specific style sheet.
http://www.alistapart.com/articles/goingtoprint/