Print CSS for large table

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

<table>
<tr><th>Headi开发者_开发技巧ng</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?

---

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

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

See page-break-after.

---

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