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 Commented May 24, 2016 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).
    – Peter
    Commented May 24, 2016 at 13:19
  • put it in a script editor webpart between your graph-parts Commented May 24, 2016 at 13:20
  • I tried this but it doenst work inside script editor webpart <DIV style="page-break-after:always"></DIV>
    – Peter
    Commented May 24, 2016 at 13:44
  • If you want to add pure html (as above) you can use a content editor wp Commented May 24, 2016 at 13:55

1 Answer 1


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
    – Peter
    Commented May 25, 2016 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
    Commented May 25, 2016 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.
    – Peter
    Commented May 25, 2016 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
    Commented May 25, 2016 at 14:32
  • hm yes thats a good tip, i'll copy it first (but work on that tomorow its now evening here.
    – Peter
    Commented May 25, 2016 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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