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?

Answer 1

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