Long table

yourivdlans

Long table
November 11, 2011 04:21AM

Registered: 1 year ago
Posts: 6

Hi,

We've been testing the pdfcrowd API for a few days now, and i'm pretty pleased with the results so far!
I'm trying to create pdf versions of pages out of a webshop. These pages often contain large tabels covering multiple pages and sometimes it will cut a word in half showing some pixels at the end of a page and the remainder on the next page.
I've tried setting a page-break-after:always; on a tr and/or td after x amount of rows, but this didn't seem to work. Also ending the table, setting a div with a page-break-after:always; and then starting the table again works, but doesn't feel like a good solution.
Another possible solution i found was wrapping each of td's content with div and setting a class which has the attribute page-break-inside:avoid; and removing all the padding from the td's and setting a margin on the div.

<html>
	<head>
		<style>
		.cell {
			page-break-inside:avoid;
			margin:5px;
		}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td><div class="cell">content 1</div></td>
				<td><div class="cell">content 2</div></td>
				<td><div class="cell">content 3</div></td>
				<td><div class="cell">content 4</div></td>
				<td><div class="cell">content 5</div></td>
				<td><div class="cell">content 6</div></td>
			</tr>
		</table>
	</body>
</html>

Although this also didn't give me the desired result, has anyone encountered this problem and/or knows a way to fix this?

Thanks.

Reply Quote

support

Re: Long table
November 11, 2011 02:10PM

Admin
Registered: 3 years ago
Posts: 611

Hi,

Update (2012-05-20):

page-break-* css properties are supported almost anywhere now.
The javascript workaround described below is not needed anymore as we added support for "page-break-inside:avoid". The following css code should prevent a table row from being split into two different pages:
```
  td, th { page-break-inside: avoid; }  
```

Brief summary on the page-break-* css properties: page-break-inside is not supported. page-break-after and page-break-before do not work when used in a table or inside a floating element or inside an element which is set to overflow:hidden.

However, there is a workaround for this scenario. I wrote a utility javascript function which dynamically splits the table into smaller ones that fit the page height and inserts page breaks accordingly. To use it:

Copy the function from http://s3.pdfcrowd.com/public/js/pdfcrowd.js to your code.

Declare the page break class:

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

Set some class on your <table>:
```
  <table class="pretty-split">  
```
Call the function in onDomReady with the table class, the PDF page printable height in pixels, and the page break class:
```
  pdfcrowd.splitTable(".pretty-split", 1085, "page-break");  
```

Here is a complete example:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="http://s3.pdfcrowd.com/public/js/pdfcrowd.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(function() { pdfcrowd.splitTable("pretty-split", 1085, "page-break"); });
    </script> 

    <style>
      .page-break { page-break-after: always; }
    </style>

  </head>
  <body>
    <table class="pretty-split">
      <tr>
        <td>content 1</td>
        <td>content 2</td>
      </tr>
      <tr>
        <td>content 3</td>
        <td>content 4</td>
      </tr>
      <tr>
        <td>content 5</td>
        <td>content 6</td>
      </tr>
    </table>
  </body>
</html>

Notes

printableHeight is the page height minus vertical margins in pixels. For instance, if the page height is 11.7in and vertical margins are 0.2in then 11.7in-2*0.2in = 11.3in which is 11.3*96=1085 pixels.
The table should not set the id attribute since it is cloned on each page. Use a class instead.
You need to load jQuery before calling the function.

I hope this helps. Please let us know if you need any assistance.

Edited 2 time(s). Last edit at 05/20/2012 12:51PM by support.

Reply Quote

yourivdlans

Re: Long table
November 14, 2011 07:58AM

Registered: 1 year ago
Posts: 6

Thanks for your reply!

I've tried it out and so far its looking good, I was missing the table header though. So I modified your script a little to append the table header to the first table.
You can check out the changes here: https://gist.github.com/1363897
Lines 7, 41-45 have been added.

Reply Quote

support

Re: Long table
November 15, 2011 09:06AM

Admin
Registered: 3 years ago
Posts: 611

Great! You may also want to compensate for the table header height when calculating the table breaks.

Reply Quote

ofirindig

Re: Long table
December 08, 2011 03:34AM

Registered: 2 years ago
Posts: 9

still splits table in some cases

Reply Quote

rohit_buddy

Re: Long table
August 13, 2012 04:58AM

Registered: 9 months ago
Posts: 1

Hello

The solution works...what is the license around http://s3.pdfcrowd.com/public/js/pdfcrowd.js

Thanks

Edited 1 time(s). Last edit at 08/13/2012 04:59AM by rohit_buddy.

Reply Quote

support

Re: Long table
August 13, 2012 09:11AM

Admin
Registered: 3 years ago
Posts: 611

The code is MIT license. However, the splitTable() function should be no longer needed. Currently, the preferred solution is to use

td, th { page-break-inside: avoid; }

Reply Quote