0

Follwing similer quesions like How to deal with page breaks when printing a large HTML table, I want to do the oppsite thing, is there a way using CSS to set the page end point. example:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    .endOfThePage {  } //some css to mark as the end of current page in print mode
    </style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->

<tr>
            <td>x</td>
        </tr>
<div class = "endOfThePage"></div>
<!--some other stuff that will be printed on the next page -->

    </tbody>
    </table>
</body>
</html>

So at the end when the user clicks on print(window.print) there will be 2 page, one the part before endOfThePage div and one with the rest of the page.

I hope that it is clear.

Community
  • 1
  • 1
Itsik Mauyhas
  • 3,824
  • 14
  • 69
  • 114

2 Answers2

1

Create an extra stylesheet print.css and include it like this:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

In this stylesheet define it with posititon:absolute and the margin in px.

Zer0
  • 1,580
  • 10
  • 28
1

So I used 

@media print {
    footer {page-break-after: always;}
}

Working fiddle.

Itsik Mauyhas
  • 3,824
  • 14
  • 69
  • 114