Printing Tables

From CSS Discuss

Jump to: navigation, search


Printing Tables

Page headers and footers

We're talking about headers and footers for data tables that are repeated on each printed page and that are controllable through CSS, not the page headers and footers that the browser adds automatically (for which see Print Stylesheets ). For ordinary printed page headers and footers (i.e. not involving tables) see Printing Headers .

When long data tables are printed, it's often very helpful (from the user's point of view) for the header row to be repeated at the top of each printed page. To do this, you need to define two additional HTML elements <thead> and <tbody>. See the HTML 4.01 spec Section 11.2.3. The spec doesn't make the desired behaviour mandatory but does suggest that browsers could usefully implement their support for <thead> in this way.

In terms of CSS, browsers should give the display property of the <thead> element an initial value of table-header-group, as in:- thead {display: table-header-group;} See the CSS2.1 spec Section 17.2.

If browsers fail to do this, or fail to implement <thead> and <tbody> at all, then the printing of the page will degrade gracefully.

Research shows that browser support is as follows (as at November 2004). Note that overall handling of page breaks is variable; see Print Stylesheets .

These browsers repeat the header row defined by <thead> at the top of each printed page: Gecko-based browsers (I tested Firefox 1.0 Preview=Gecko 1.7.3, Mozilla 1.7.1 and NS7.1=Gecko 1.4). However, because these browsers may split a row across pages (see below), the header row may interrupt a <tbody> row, which may look unacceptably odd.

IE6 repeats the header row on succeeding pages provided you explicitly specify the correct value of the display property (see above). I believe IE5.5 works in the same way. The odd display effect mentioned above will apply.

These browsers don't repeat the header row on succeeding pages: Opera 7.54, IE5.0.

You'll see from the HTML spec that it's possible to define a footer row using <tfoot>. However, browser support is badly broken when printing (including Opera and Gecko-based browsers) and I suggest forgetting about it. [Opera prints the footer row over other rows; Gecko browsers may truncate the footer row.]

Controlling page breaks

See Print Stylesheets for general advice. The page-break properties can be validly applied to the element, although browser support is poor. For example:- table {page-break-inside: avoid;} However, you may wish to allow a table to be split across pages but avoid having rows split. The CSS2 spec and the CSS2.1 CR are very unclear whether the page-break properties can be applied to (or to other table-type elements such as <th> and <td>; unlike <table> none of these is a block element). The assumption must be that they are not. I have raised the lack of clarity with Bert Bos of W3C who has recorded it as an issue (October 2004). Obviously it is very desirable that they should apply. In the meantime, my limited testing shows that the rule:- tr {page-break-inside: avoid;} is honoured by Opera 7.54 but not by Gecko-based browsers (I tested Firefox 1.0 Preview=Gecko 1.7.3, Mozilla 1.7.1 and NS7.1=Gecko 1.4) or by IE6. The CSS2 validator accepts the rule, by the way.

About this page

This page was created in July 2004 by Jim Wilkinson , who welcomes comments, contributions and corrections.
Personal tools