Dynamic page break when printing (in <table>)

Asked

Viewed 16,534 times

4

On a budget screen, I display the products registered within a Foreach in a table (each product), so in some cases, at the time of printing the page the table is broken and ends up getting very ugly in printing. I tested the following in my CSS:

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

But it breaks the page ALWAYS every time I have table but what I need is to break dynamically, only when there is a page break. I also tested with 'auto' instead of 'Always' and did not succeed.

How can I make the break only when the Table for break on print screen?

EDIT: I looked in several places and so far I could not solve the dynamic page break, IE, only break the page when the table comes broken.

A cruel doubt, why does 'auto' not work? Browser incompatibility? (Chrome V36)

css impression
  • 1

    Ever tried to use auto instead of always? By the way, you just want me to change the page if the table entire does not fit in it, right? Instead of, say, breaking in the rows of the table instead (in which case the page-break-after would apply to tr instead of the table). P.S. Related question (in Soen)

  • @mgibsonbr tried to apply on tr and it didn’t work. I searched on Soen on the link you indicated and tried some possible solutions and I’m still at zero.

2 answers

1

Are there texts in the reports outside the tables? Or are they just tables you want to print? I have an example here only with multi-page table, which worked perfectly, using only the css controls mentioned above. 

table { page-break-inside:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

Remembering that the table should be structured correctly with all html tags according.

References:

icul8r.

  • not outside the table, take a look at what it looks like when I print https://imagizer.imageshack.us/v2/528x523q90/539/cPdtxE.png I tried to use what you gave me but it didn’t work. The code structure of the table is apparently correct.

  • 2

    Dude, I just tested with avoid instead of auto and it worked! table { page-break-inside:avoid }

  • opa, good news, then registered solution!

0

With me also worked using the avoid.

Just put the CSS rule already mentioned above. 

@media print{
    table{ page-break-inside:avoid; }
}

Browser other questions tagged css impression

You are not signed in. Login or sign up in order to post.