I have a <table> data where consecutive lines are conceptually connected and should stay together. I group each pair of lines in the <tbody> . When the time comes to print the table, I want to make sure that page breaks occur only between the <tbody> tags.
I tried some options for page-break-inside: avoid and page-break-after: auto , but can't make it work in Chrome 42 (see screenshot below)
However, it seems to work as expected in Firefox 40 and IE 11. It seems that page-break-* can only be applied to block-level elements. Is there a way to do this in html / css?
Code example:
<!doctype html> <html> <head> <style> table { width: 70%; border-collapse: collapse; } thead { display: table-header-group; text-align: left; border-bottom: 2px solid #000; } tbody { page-break-inside: avoid; border-bottom: 1px solid #ccc; } </style> </head> <body> <table> <thead> <tr> <th>Project #</th> <th>Owner</th> <th>% Complete</th> </tr> </thead> <tbody> <tr> <td>HR-123</td> <td>Arther Dent</td> <td>42%</td> </tr> <tr> <td colspan='3'>Description: Find travel guide to get me back to earth.</td> </tr> </tbody> <tbody> <tr> <td>RD-123</td> <td>Frodo Baggins</td> <td>9%</td> </tr> <tr> <td colspan='3'>Description: Find a better way to get the ring to Mordor.</td> </tr> </tbody> </table> </body> </html>
Here's a JSFiddle that will give you a little idea of what I'm trying to accomplish.
Edit: I believe not to use the table, but not since (i) I want my columns to line up, and (ii) I really don't want to hard-code the column widths to make sure they are all the same .
source share