How can I get table pagination functionality while making sure some variable length content appear on one page? #465

ofiesh · 2020-04-14T23:37:43Z

Edit:

I was able to get it to work by putting the things I want to stay on a page in a tbody with page-break-inside: avoid, but the header is orphaned on the previous page.

It does not seem to be fixed by #418

Original:

I have a header, variable length text and multiple rows of images. I want the header, the text and one row of images to appear on the same page. If they can't fit in the space on the current page, I want to page break before.

I also need the header to paginate. So if the subsequent images are on other pages I want the header to appear on those pages as well.

I can get the page break affect I want using divs and page-break-inside: avoid, and I can get the pagination working with table style="-fs-table-paginate: paginate;, but I can't get them both to work. -fs-page-break-min-height doesn't work because I don't know how many pixels the text can be.

Is there a way to accomplish this?

Example:

<html lang="">
<head>
    <style rel="stylesheet">
        .samepage {
            page-break-inside: avoid;
        }
        div.box {
            width: 300px;
            height: 300px;
            margin: 8px;
            background-color: #747678;
            display: inline-block;
        }
    </style>
    <title>Example PDF</title>
</head>
<body>
    
    <!-- with the divs I can force the parts I want to the same page, but can't paginate the h1 -->
    <!-- section one -->
    <div class="samepage">
        <h1>Foo</h1>
        <p>Variable length<br />text</p>
        <div class="box" />
        <div class="box" />
    </div>
    <div class="box" />
    <div class="box" />
    <!-- end section one -->

   <!-- section two -->
    <div class="samepage">
        <h1>More Boxes</h1>
        <p>Variable length<br />text</p>
        <div class="box" />
        <div class="box" />
    </div>
    <div class="box" />
    <div class="box" />
    <!-- end section two -->

    <!-- can't figure out how to force the same content to the same page -->
    <table style="-fs-table-paginate: paginate;">

        <!--
            Requirements are that the header paginates
            The header, text and first two boxes fit on the same page.
            If it doesn't fit, break before
        -->
        <thead>
            <tr>
                <th><h1>Paginated Title</h1></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <p>Variable length<br />text</p>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="box" />
                    <div class="box" />
                </td>
            </tr>
        </tbody>
        <!-- end should fit on the same page -->
        <!-- the rest can fit on any page they land -->
        <tbody>
            <tr>
                <td>
                    <div class="box" />
                    <div class="box" />
                    <div class="box" />
                    <div class="box" />
                    <div class="box" />
                    <div class="box" />
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>```

The text was updated successfully, but these errors were encountered:

danfickle self-assigned this Aug 13, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I get table pagination functionality while making sure some variable length content appear on one page? #465

How can I get table pagination functionality while making sure some variable length content appear on one page? #465

ofiesh commented Apr 14, 2020 •

edited

Loading

How can I get table pagination functionality while making sure some variable length content appear on one page? #465

How can I get table pagination functionality while making sure some variable length content appear on one page? #465

Comments

ofiesh commented Apr 14, 2020 • edited Loading

ofiesh commented Apr 14, 2020 •

edited

Loading