CSS To keep table rows together when printing

Question

I have a table that is being generated by means of a loop.
Each loop creates 2 rows of the table.

What I want to achieve is when this page is printed the the 2 rows created in each loop iteration stay together and do not get split over a page boundary.

I have tried applying the CSS rule {page-break-inside: avoid;} on both the tr and td elements with not much luck (I hear this is an known issue with non-block elements).
Apart from rebuilding the view using divs, is there a solution that I can apply to the table?

Paste generated code in a fiddle please. – thepratt Sep 26 '14 at 15:44 — thepratt, Sep 26 '14 at 15:44

score 8 · Answer 1 · edited May 23 '17 at 12:21

8

You need to combine these two styles together (although auto is the default value)

if those two rows are supposed to attach together, you might consider using a single table for each of those two rows instead of having a single table for all rows.

{page-break-inside: avoid;page-break-before:auto}

Also check comments for this answer

edited May 23 '17 at 12:21

Community

1
1

answered May 15 '15 at 03:48

AaA

3,600
8
61
86

4 years later: according to Mozilla Developer Network, `page-break-inside` and `page-break-before` have now been replaced by [`break-inside`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside) and [`break-before`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before). – Brian Morearty Oct 13 '19 at 17:09
You are right they are indeed replaced. however if I'm reading correctly from pages you have shared. New properties are not completely supported even with Firefox. however old properties are still supported, hopefully when they replace these old ones with these new ones, they don't break lots of pages and browsers. – AaA Oct 15 '19 at 03:12
1

Good callout. I tested it in Firefox and the results were consistent with what the MDN pages say: using `break-inside` and `break-before` will work if you don't set them to `page` or `avoid-page`. For example I tested `break-inside: avoid` (without `-page`) and it worked in Firefox. – Brian Morearty Oct 16 '19 at 04:17

score 0 · Answer 2 · edited Feb 08 '23 at 20:51

Unfortunately CSS page break properties are not always reliable across all browsers and platforms.

For a more sure-fire approach, as AaA mentions, I find it better to wrap the rows that you don't want split into a table of their own.

Like so:

<table>
  <thead>
   //headers
  </thead>
  <tbody>
    <tr> //Create your for loop on this element
      <td>
        <table>
          <tbody>
            <tr>
              <td>Row 1</td>
            </tr>
            <tr>
              <td>Row 2</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Each table can be more reliably kept together as needed, and the table can have as many rows and columns needed.

score 0 · Answer 3 · answered Sep 08 '22 at 13:31

The discovery of the styles page-break-inside: avoid; page-break-before: auto was very useful to me when looking for a way to do exactly this. However, I found a way of making it work without having to use separate tables. Wrap each set of rows that you want to keep together in a <tbody> element, and give that element the two styles that control page breaks. As far as I can tell, that has exactly the desired effect: if the printed document is split across multiple pages, the rows within each <tbody> element will always appear on the same page.

CSS To keep table rows together when printing

3 Answers3