CSS: page-break-inside

[reverendleo]

Hello All!
I'm having trouble implementing a page-break-inside tag within my dynamic web page. The main piece of the page is a repeater, which creates a table for each row returned in the DataSource. It currently will break the table in the middle when a page break is encountered. I'm hoping to have it not break the table in the middle, and I assume this is the tool to use. Here is the relevant section of code, I'm just not sure where the page-break tag should go:

<form runat="server">
<asp:Repeater ID="rptBid" runat="server">
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0">
<p STYLE="page-break-inside: avoid">
<tr>
<td width="100" align="left"><span class="style13">Project Name:</span></td>
<td width="250" align="left"><span class="style11"><u><%#Container.DataItem("ProjName ")%></u></span></td>
<td width="100" align="left">

[jscher2000]

This is interesting advice, from CSS Page-break-inside Property: "Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables..."

In your code example, you have a

in an invalid or at least unhelpful location. A

inside a table cell (<td>) should be interpreted correctly, but a

before a cell should implicitly be closed before that cell and therefore have no effect.

You could try applying the style to your <tr> elements and see whether that works:

<style>
tr {page-break-inside: avoid}
</style>

Or maybe you need to apply that to <td> elements. I'm not 100% clear from this: http://www.w3.org/TR/REC-CSS2/page.h...ed-page-breaks

[Jezza]

Hi there

I have never used this , so it is an interesting point you raised. I too had a look around the web and saw this link: http://www.htmlref.com/reference/app...page-break.htm

This is a particulary interesting link as it notates which browsers support the class

[reverendleo]

Thank you both for the assistance!

I think I've decided that "avoid" is short for "avoid_if_not_inconvenient_to_do_so". Upon further research, I altered the syntax a couple of different ways:

<table border="0" cellpadding="0" cellspacing="0" style="page-break-inside:avoid">
<tbody style="page-break-inside:avoid">.......etc.

This still breaks the table in the middle at the end of the page.

I also tried

<p STYLE="page-break-inside:avoid">
<table border="0" cellpadding="0" cellspacing="0">.....etc. (closing the </p> after the </table>)

Same result here.

I did discover that "page-break-after:always" spits out one instance of the table, then jumps to the next page.

So far the only thing I've done to get by in the meantime is to adjust the pixel sizes on the font so it fully completes 6 rows to exactly fill the page.

Thanks again.

[Jezza]

<P ID="edit" class=small>(Edited by Jezza on 22-Feb-06 13:57. To add PS)</P>Hi Again

I did note that you mentioned your people using IE6 and it appears that page-break-inside:avoid appears to be unsupported and that browser support is very sketchy especially in IE6

Have a look at this link under the section Controlling Page breaks which gives a little more insight. http://css-discuss.incutio.com/?page=PrintingTables

I have a look in some of my usual haunts and see if there any CSS hacks for IE6

PS

Now found another nice link: http://www.csscreator.com/attributes/prope...ge-break-inside to show browser support aspect