I am working on a reports page, with some graphic bars and tables.

The page became a bit long, well not too long, but longer then an A4 print page.

As I show 3 tables with each having a graph left to them, all below each-other, I wonder.

Can I put in some code that tells Internet Explorer to do a nice page-break so that each table and graph starts as a new printed page?

I don't want my graphs and tables to get cut-off halfway.

  • There is some CSS you can play with: css-tricks.com/almanac/properties/p/page-break – Robert Lindgren May 24 '16 at 13:12
  • if possible could it be done by a scriptlet webpart?, i dont like to alter the css code generated by sharepoint (would be easily overwritten with page changes). – user3800527 May 24 '16 at 13:19
  • put it in a script editor webpart between your graph-parts – Robert Lindgren May 24 '16 at 13:20
  • I tried this but it doenst work inside script editor webpart <DIV style="page-break-after:always"></DIV> – user3800527 May 24 '16 at 13:44
  • If you want to add pure html (as above) you can use a content editor wp – Robert Lindgren May 24 '16 at 13:55

I recently had a similar requirement and achieved this with the page-break-before property.

Assume you have some HTML on your page like this:

<div id="table1" class="table-chart"></div>
<div id="chart1" class="table-chart"></div>

Now add a script editor web part to your page and add this to it:

    @media print {
        table-chart {
            page-break-before: always;

The @media print ensures the CSS only applies when the page is printed and not when it is displayed on the screen.

See more info about page breaks with CSS here:


  • Hmm so for this to work i have to place the webparts inside seperate tables, and figure out what class sharepoint gives to the tables ?. Problem not sure if Sharepoint generates them on the fly, as it shouldnt break web editing with sharepoint, as these pages might get changed in the future – user3800527 May 25 '16 at 12:07
  • Not quite. Place whatever it is that contains your chart or table or any other element inside a div. Give that div a class name, you can call it anything. I called it table-chart in my answer. Then ensure you've added the CSS to your page and it should work. Try it and see what you get. – Submits May 25 '16 at 12:14
  • Hmm so using the script editor i could create my own html (instead of code) and write down <div class="pagebreaker"> write a white dot here </div> And then call the css trick with @medi print upon "pagebreaker" class ?. Thereby not interfering with sharepoint classes and styles ?. (i am bit afraid of braking things now that the charts finnaly looks good), and sharepoint doesnt get errors on the page now. – user3800527 May 25 '16 at 12:53
  • Is the page in your Site Pages library? Create a copy of the page and try the change on the copy. – Submits May 25 '16 at 14:32
  • hm yes thats a good tip, i'll copy it first (but work on that tomorow its now evening here. – user3800527 May 25 '16 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.