CSS Printing

**r0b3r70** · Apr 10, 2009 06:39

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?

**RyanReese** · Apr 10, 2009 06:46

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;

**r0b3r70** · Apr 10, 2009 06:52

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]

**Paul O'B** · Apr 10, 2009 07:00

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>

**RyanReese** · Apr 10, 2009 07:02

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.

**r0b3r70** · Apr 10, 2009 07:10

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>

**RyanReese** · Apr 10, 2009 07:33

My example would work (in theory) in all but IE...

**Paul O'B** · Apr 10, 2009 07:34

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.

**RyanReese** · Apr 10, 2009 07:36

: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)

**r0b3r70** · Apr 10, 2009 07:40

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?

**RyanReese** · Apr 10, 2009 07:42

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

**kaloua3** · Apr 10, 2009 07:50

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.

**r0b3r70** · Apr 10, 2009 07:54

@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.

**RyanReese** · Apr 10, 2009 07:55

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

**r0b3r70** · Apr 10, 2009 08:07

It's not for a 'regular webpage', but for printing html formatted invoices in a web-based application.

**RyanReese** · Apr 10, 2009 08:08

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.

**RyanReese** · Apr 10, 2009 08:10

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.

User Tag List

Thread: CSS Printing

Thread Tools

Display

CSS Printing

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions