Print CSS for large table

Question

I have a rather large table, that is separated out into smaller sections with spacer rows

<table> <tr><th>Heading</th>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr class='spacer_row'><td></td></tr> <tr><th>Heading</th>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr class='spacer_row'><td></td></tr> <tr><th>Heading</th>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr class='spacer_row'><td></td></tr> ......... ......... </table>

I am creating a print.css, I would like to force page breaks at spacer_row if needed. How do i use the page-break css properties?

Update: Gave up after experimenting a bit. Support of print css varies among browsers. More importantly, the browsers do not seem to allow conditional positioning of page breaks within a single table, so I think I have to write new markup with each section being a separate table — Mr Hyde
– Mr Hyde, Commented Mar 7, 2011 at 20:44

Oded · Accepted Answer · 2011-03-04 20:32:00Z

1

This css rule will ensure a new page will start after each spacer row:

.spacer_row { page-break-after: always; }

See page-break-after.

edited Mar 4, 2011 at 20:32

answered Mar 4, 2011 at 20:17

Oded

501k102 gold badges900 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mr Hyde Over a year ago

I don't want it always, only if needed it be placed at spacer_row

Oded Over a year ago

@RisingSun - Then only place it on those rows. You can create a special CSS class for those rows and add it to them.

Mr Hyde Over a year ago

The table is being generated from a database, I wouldn't be knowing where the page breaks will be. 3 - 5 sections would easily fit on a page

Oded Over a year ago

@RisingSun - You won't know until you print. You need to decide where to put the page breaks.

slolife · Accepted Answer · 2011-09-15 20:06:57Z

Try this out, although I have not tested it myself. I had good results on pages using it on div, p and other tags. Might work:

CSS (tell the browser to avoid having a page break within a tbody tag)

tbody {page-break-inside:avoid}

HTML (Wrap each group of rows in a tbody tag and keep your spacer rows)

<table> <tbody> <tr><th>Heading</th>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr class='spacer_row'><td></td></tr> </tbody> <tbody> <tr><th>Heading</th>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr class='spacer_row'><td></td></tr> </tbody> <tbody> <tr><th>Heading</th>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr><td>Content</td>...</tr> <tr class='spacer_row'><td></td></tr> </tbody> <tbody> ......... ......... </tbody> </table>

That's a good starting test.

In production, I would avoid actually putting the page-break-inside:avoid css on all tbody tags, and instead create a css class that you can apply to tbody or any container tags. Here's the reason: I have found a bug in IE (all the way up to IE8) where if you nest containers that have that CSS and IE is forced to page break inside, IE seems to truncate the rest of the page.

Unfortunately, this w3schools.com page says that the only browser that supports page-break-inside is opera. Here's hoping for better support in the future

Collectives™ on Stack Overflow

Print CSS for large table

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related