Search code examples
htmlcsspage-break

Page break in table if there is an overflow

I have an application that generates tables for reports; however during printing - the tables may get split, which causes some of the information to get cut off ( I mean it's only printing the top half of letters and then getting split to the next page ).

I've tried page-break-before ; however that causes every table to be on it's own page. page-break-inside seems to be only supported by Opera (And I'm not even sure if that's what I want).

What I'm hoping to find, is something that if the entire table cannot be fit onto a page - it is pushed to the next; or better yet - if the next row is started on the next page.

Any help would be appreciated!

Solution

  • Use Javascript:

    • Parse data inpage and reformat
    • Get table height
    • If table height > page allowed height = add a new table

    • Each page fits into:

      div.page { height: 842px; width: 595px; }

    The simplest way of achieving this is a print button that opens a new page, the data is there in a format that Javascript can convert it into a table.

    This is the only real accurate way I know of configuring a page of data that splits in tables.