SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Thread: CSS Printing

  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Printing

    Hi guys,

    I want to print a page, using a print stylesheet.
    The page contains a header, a long table and a footer.
    When I print it, splitting the table using .pagebreak { page-break-after: always; } tag it works fine printing the header on the 1th page and footer on the last.

    What I would like to do is print the header and footer element on each page.
    And I want to use CSS for doing it.

    Any clues?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Say you have this

    <div id="header">asdf</div>
    <div id="content">asdf</div>
    <div id="footer">asdf</div>

    You can simply (in the styleshet for print) add display:none; to #content OR if you don't want to collapse the white space you can add visibility:hidden;
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks something like this:

    [header]
    [table #1]
    [table #2]
    [table #3]
    [footer]

    When printed it looks like this:

    Page 1:
    [Header]
    [Table 1]

    Page 2:
    [Table 2]

    Page 3:
    [Table 3]
    [Footer]

    I want it to look like this:
    Page 1:
    [Header]
    [Table 1]
    [Footer]

    Page 2:
    [Header]
    [Table 2]
    [Footer]

    Page 3:
    [Header]
    [Table 3]
    [Footer]

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can do it if the header and footer are part of the same table. You can then just use the thead and tfoot elements and good browsers should automatically print the header and footer on every page without doing anything.

    For IE you need to add this.
    Code:
    thead {
        display: table-header-group;
    }
    tfoot {
        display: table-footer-group;
    }

    Here's an example that works in IE7 and Firefox (not sure about others).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    table {
        width:100&#37;
    }
    td, th {
        border:1px solid #000;
        text-align:center;
        padding:5px;
    }
    tfoot td {
        font-weight:bold;
    }
    thead {
        display: table-header-group;
    }
    tfoot {
        display: table-footer-group;
    }
    </style>
    </head>
    <body>
    <table cellspacing="0" cellpadding="0">
        <caption>
        Table example
        </caption>
        <thead>
            <tr>
                <th scope="col">header 1</th>
                <th scope="col">header 2</th>
                <th scope="col">Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>footer 1</td>
                <td>footer 2</td>
                <td>footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <th scope="row">Row </th>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>
    </body>
    </html>

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ok...thought about it for a bit and I have come up with a solution...

    Use :before and :after on the <body> to define the header and footer. Remove the header and footer from the actual markup for print stylesheets.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx for the reply's !

    That works good with firefox, I'm looking for something that would work with safari (safari only is cool as well)
    But what I actually ment was a pageheader outside of the table, like a property that i just could add to an element, for example :

    <div id="header"> some stuff </div>
    <table> table stuff </table>
    <div id="footer"> stuff </div>
    <p id="footerprintaswell"> lorem ipsum </p>

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    My example would work (in theory) in all but IE...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    But what I actually ment was a pageheader outside of the table, like a property that i just could add to an element, for example
    You could just include the header and footer in the table as I suggested (but still won;t work in Safari).

    For Firefox you could just use a fixed position header at top:0 and a fixed positioned footer at bottom :0 but it won't work in Safari.

    Running headers and footers are proposed in CSS3 but you'll have a long wait.

    I can't see any other way to do this other than already mentioned.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    :before and :after on the <table> would work also and I don't know which would be more stable as this is a unique question (not asked very often, or in my case, at all)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan: I'm sure your example will work, but I don't want to remove the header from printing.

    Let's forget the table, footer and header for a moment.

    I want to have a couple of elements, let's say the are div's.

    <div id="1"> </div>
    <div id="2"> Lorem ipsum </div>
    <div id="3"> </div>

    The 2nd div is the one I want to split into a couple of pages when printing and I want the 1th and 3th div to be printed on every page.

    Is this possible with CSS?

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Uhh..I think you are misunderstanding me..the users will get the exact same content if you use my way (though you may have to put the styles inline as using :before and :after are not recognized in the DOM, I don't know whether that includes CSS also but...)

    What is there to be scared about using my way?

    Not possible in CSS2, but in 3 as Paul posted.

    Edit:

    I'm just talking about display:none; the actual header and footer and INCLUDE that HTML code in the :before and :after on the <body>. It's safe!!!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Enthusiast kaloua3's Avatar
    Join Date
    Mar 2009
    Location
    Florida
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about creating a separate "printer friendly" document with all of your content already split, with header/footer, on several print pages? You could have a link to this from the page you want printed. It's clumsy and big, but it gets the job done.

  13. #13
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @kaloua3:
    I could use jQuery to copy the elements I want and generate a new page for print. That would work.
    But, i'm looking for an easier solution. I want to add a class to a random element, so it will get printed on every page, while the content/text will be splited over many pages.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    But what about pages with different length? It would be an awful amount of work when such options ^^^ don't need much work.

    For every single page in a 50 page site that would take days
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not for a 'regular webpage', but for printing html formatted invoices in a web-based application.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Either or, just use the pseudo classes (you are in an environment that supports it yes?) to add a header/footer before and after the content..page-break as you wish.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!doctype html>
    <html>
    <style>
    div{background:blue;color:red;}
    div:before{content: "This is the header crap";}
    div:after{content: "This is the footer crap";}
    </style>
    <body>
    <div>
    <p>This is some content
    
    </div>
    </body>
    </html>
    Safe.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

Bookmarks

Posting Permissions

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