CODEWITHSUNDEEP
htmlcssprinting
Primoz Rome
Primoz Rome

Reputation: 11061

CSS and HTML print setup for multi-page documents with running header and footer

I am having nightmares figuring out how to properly set CSS and HTML layout for printing documents in our web-app. We have different documents that come into the system (order, invoice, delivery notes, ...). The documents consist of:

What I want is following print functionality:

Currently my HTML layout is like this:

<!-- STATIC HEADER -->
<div id="pageHeader">
    <table class="table">
        <tr>
            <td>Static header content here</td>
        </tr>
    </table>
</div>

<!-- DOCUMENT CONTENT -->
<div id="pageBody">

    <!-- Customer data -->
    <table class="table">
        <tr>
            <td>Customer data here</td>
        </tr>
    </table>

    <!-- Items table -->
    <table class="table table-condensed table-print">
        <thead style="display:table-header-group;">
            <tr>
                <th>Table header here</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Rows here</td>
            </tr>
        </tbody>
    </table>

</div>

<!-- STATIC FOOTER -->
<div id="pageFooter">
    <table class="table">
        <tr>
            <td>Static footer content here</td>
        </tr>
    </table>
</div>

I was reading about running headers and footers following answer on this question but I don't get the desired results. Currently my CSS is set like this:

#pageHeader, #pageFooter { display: none; }

@media print {
    #pageHeader { display: block; position: running(pageHeader); width: 100%; }
    #pageFooter { display: block; position: running(pageFooter); width: 100%; }
}

@page {
    @top-center {
        content: element(pageHeader);
    }

    @bottom-center {
        content: element(pageFooter);
    }
}

Firefox gives me completely strange results. It first prints a blank page, then the second page is ok if it's a single page document, if it's a multi-page document then it only prints first page, other pages are ignored.

Google Chrome is slightly better. It prints all pages but it wont print static header and footer on every page. Header is printed only on first page, while footer only on last page.

Also the other problem is that the main table that can spread trough several pages does not print table header in every page if the table spreads trough multiple pages. I thought that display:table-header-group; on <thead> supposed to do that?

Is this just impossible to achieve or am I doing something completely wrong? If you can give me any advice or strategy on how to handle this I will be very happy. Since this app is running in controlled environment I can focus on one or two browsers (Chrome and Firefox would be great). If it works in both is bonus!

Upvotes: 6

Views: 12174

Answers (3)

Lukas Bernhard
Lukas Bernhard

Reputation: 103

Focusing the same issue I did some research. Here my results:

The display:table-header-group; doesn't work in chromium/chrome/webkit/.. because its not implemented. There is an open issue since 4 years. https://code.google.com/p/chromium/issues/detail?id=24826

You wanted to use @top-center and @bottom-center. This would be a great think. It's declared here h ttp://www.w3.org/TR/2013/NOTE-css-print-20130314/#at-rules but refering to http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#Grammar_and_rules it is not implemented by any layout engine. I don't know why its mentioned here http://alistapart.com/article/boom. Anyone any idea?

The reason why you get your header on the first page and the footer on the last one is quite simple: just cut out the @page section and you see: @media print { ... display:block ... If you declare you footer on top, it does not work.

Upvotes: 4

Ashwin Hegde
Ashwin Hegde

Reputation: 1771

Firefox has problems printing some styles in HTML pages that appear normal on the screen, but since this is confidential information, it's hard to give any suggestions on what to try, and it's probably not helpful to suggest hacking the page. The following are general suggestions.

When you have a problem with one particular site, a good "first thing to try" is clearing your Firefox cache and deleting your saved cookies for the site.

  1. Bypass Firefox's Cache

    Use Ctrl+Shift+r to reload the page fresh from the server.

    Alternately, you also can clear Firefox's cache completely using:

    • orange Firefox button (or Tools menu) > Options > Advanced
    • On the Network mini-tab > Cached Web Content : "Clear Now"

    If you have a large hard drive, this might take a few minutes.

  2. Remove the site's cookies (save any pending work first).

    While viewing a page on the site:

    • right-click and choose View Page Info > Security > "View Cookies"
    • Alt+t (open the classic Tools menu) > Page Info > Security > "View Cookies"

Then try reloading the page and logging in again. Does that help?

Upvotes: 0

Ashwin Hegde
Ashwin Hegde

Reputation: 1771

Could you try Firefox's Safe Mode? That's a standard diagnostic tool to bypass interference by extensions (and some custom settings). More info: Troubleshoot Firefox issues using Safe Mode.

You can restart Firefox in Safe Mode using

Help > Restart with Add-ons Disabled

In the dialog, click "Start in Safe Mode" (not Reset)

Safe mode does not automatically disable plugins. Flash should be fine, but you could disable the others here:

orange Firefox button (or Tools menu) > Add-ons > Plugins category

Any difference?

Upvotes: 0

Related Questions