CODEWITHSUNDEEP
javascripthtmlprinting
BartMao
BartMao

Reputation: 681

Divide multiply html tables into different pages when printing

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

Upvotes: 1

Views: 2630

Answers (4)

Kurenai Kunai
Kurenai Kunai

Reputation: 1902

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.

Upvotes: 0

Karthik
Karthik

Reputation: 74

Please give Page break style to your table.

table{
page-break-after  : auto ;
}

For more info on page break please go to link.

Upvotes: 1

jmgross
jmgross

Reputation: 2346

You can use page-break-after CSS property

<style>
    @media print
    {
        table {page-break-after:always}
    }
</style>

Upvotes: 0

Brane
Brane

Reputation: 3339

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...

Upvotes: 3

Related Questions