CODEWITHSUNDEEP
cssprinting
Mr Hyde
Mr Hyde

Reputation: 3413

Print CSS for large table

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?

Upvotes: 1

Views: 2170

Answers (2)

slolife
slolife

Reputation: 19870

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

Upvotes: 0

Oded
Oded

Reputation: 499312

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

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

See page-break-after.

Upvotes: 1

Related Questions