Results 1 to 5 of 5
  1. #1
    Star Lounger
    Join Date
    Apr 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS: page-break-inside

    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">

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: CSS: page-break-inside

    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

  3. #3
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS: page-break-inside

    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
    Jerry

  4. #4
    Star Lounger
    Join Date
    Apr 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS: page-break-inside

    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.

  5. #5
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS: page-break-inside

    <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
    Jerry

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •