11

I have a bit of logic in one of my Rails views that states if the table I'm about to print is over 7 rows, create a div around the table with a min-height style to make sure the footer below this table goes to the end of the page 2, rather than page 1.

I've tested this logic in many browsers including: Chrome, Safari and IE (!) and they all work as expected. Firefox, however, is adding a pesky page-break right before the div and table. I have tried avoiding this page-break by adding this CSS style in the div and also in the table: page-break-before: avoid; as well as this newer Firefox style: break-before: avoid;, but it doesn't seem to affect this page-break during printing. Any other ideas? Does Firefox automagically add a page-break before large divs when printing? 

<div style='min-height: 1150px;'>
    <table>
     blah blah table stuff...
    </table>
</div>
Ricardo
  • 3,696
  • 5
  • 36
  • 50
user2203451
  • 221
  • 2
  • 7
  • According to [this page](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before#Browser_compatibility), `break-before` doesn't exist yet. Until it does, use `page-break-before`. – Mr Lister Jul 07 '13 at 18:32
  • thanks, but tried page-break-before: avoid; in both the div and in the table tags. didn't work. any other suggestions? – user2203451 Jul 07 '13 at 20:45
  • 1
    At this point I changed the min-height selector to height and it works as it should when printing from all browsers. No exactly the solution I wanted, but it gets the job done for now. Would love an actual fix for the min-height in Firefox if anyone has a solution. – user2203451 Jul 08 '13 at 01:36
  • Can you attach/link an example of the full html document that the exhibits the problem? – chris raethke Jun 10 '15 at 02:42

2 Answers2

3

Well, Because we don't have live example of your code Unfortunately is very hard to finger out the solution but the good news is I can provide some information about it might works but not sure.

  1. Always insert a page break before each element (when printing).
  2. You can't use this property for (an empty div) or with (position:absolute;).
  3. Before using page-break-before, check if you can use break-before instead.
  4. Avoid page break before the element (if possible) so is not guaranteed to work, That is why we ask you to provide some live example to work with it.
  5. Try to use page-break-before: inherit; in the second page to till the second page you are part of the first part of the page.(so if you have one table tray to know where is the last part of the first page and add either page-break-before: avoid; , break-before: avoid; , break-before: inherit; or page-break-before: inherit;).
  6. If not try to use either (column-break-before: avoid; or -moz-column-break-before: avoid;) before the beginning of the second page or (column-break-inside: avoid; or -moz-column-break-inside: avoid;).
  7. If not try to use page-break-inside or break-inside it might the brake is inside not outside.

I hope this will help you to fix your problem and let me know which the most it works for you. Also let me know if you have any question.

Mohammed Moustafa
  • 630
  • 5
  • 16
2

Try this code, and this will resolve your query

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto; border-collapse: collapse }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>
Jaffer Wilson
  • 7,029
  • 10
  • 62
  • 139