Table row splits across two pages (print media)
I have a table which is OK in web pages, but when printing my table (ctrl+p) it breaks not the way I want. The last row of the first page splits with the part of the row on the first page and the other part of the row on the second page. So, is there any way to overcome the problem, the rows can have different content and size. I also tried this properties
page-break-before/after: auto. page-break-inside:avoid;
but with no result. Is there any way to break the table and move the part of the table to the next page without splitting the last row into two parts for print media? Any help will be appreciated.
table,th,td { border:1px solid black; border-collapse:collapse; } th,td { padding:5px; }
</style> </head> <body> <table style="width:100%;"> <tr> <th><span>Firstname</span></th> <th><span>Lastname</span></th> <th><span>Points</span></th> </tr> <tr> <td><span>Jill</span></td> <td><span>Smith</span></td> <td><span>50</span></td> </tr> <tr> <td><span>Eve</span></td> <td><span>Jackson</span></td> <td><span>94</span></td> </tr> <tr> <td><span>John</span></td> <td><span>Doe</span></td> <td><span>80</span></td> </tr> /*here I have many <tr> elements*/ </table> </body> </html>
Answer
If I understand correctly, you want your table to break only between rows and not within them. You can accomplish this in Firefox and Internet Explorer with the following css rule:
tr {page-break-inside: avoid;}
Unfortunately, that doesn't work in other popular browsers, such as Chrome.
As has been suggested, you can prevent page breaks within the content of an individual cell by wrapping it in a div that has "page-break-inside: avoid;" set on it, but if the content height varies within the row, you'll still end up with parts of the row on two different pages.
If you really want to solve this problem and are willing to throw some javascript at it, I have posted a solution here that should do the trick.