Menu
I've created a HTML based report that can be variable lengths and number of segments in C# (which is why Crystal Reports wasn't used) and I can't use the wonderful http://www.printfriendly.com/ as the report is Intranet based (boooo, hiss).
I've created a media=print CSS file that is used to make the formatting as paper and ink efficient as possible but I have a problem. There is a very long table in the report with around 50 table rows, each one around height: 200px. Unfortunately some of the table rows are being sliced due to the automatic page breaking, with part of the table row on one page and the rest on the next page. Is there anyway (hopefully via CSS), to set the pagebreaking options to not seperate table elements (or similar elements)?
Thanks, Alex
427
The page-break-inside: avoid property should control this, but it looks like most browsers don't support that on tr or td elements. In my testing, Opera is the only one that honors this property, as used in the following test:
<!DOCTYPE html>
<title>Page Break Test</title>
<style>tr, td { page-break-inside: avoid }</style>
<table border=1>
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
<tr height=200><td>This is a test. This should be tall.<td>Another column.
</table>
If you can use Opera, this might be good enough. Another option would be to look into Prince for printing your reports, as it tends to have much better support for print stylesheet features than the browsers do (though I haven't tested this feature in particular).
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
