Printing Table Headers on Every Page

I recently researched how to print table headers on every page for long html tables spanning multiple pages. Following are my findings.

Results of Table Printing Tests

(Tested in IE7, Firefox 3, Chrome 12, Safari 5 and Opera 11.)

Firefox prints table headers on each page automatically as long as table is formatted with th tags wrapped in a thead and the main table content wrapped in tbody.

Example:

<table>
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>content 1</td>
            <td>content 2</td>
            <td>content 3</td>
        </tr>
    </tbody>
</table>

The other browsers still would not print table headers on each page however so I tried Googling a bit more and found this page: http://www.xefteri.com/articles/show.cfm?id=26

I tried adding the following CSS styles based on those from the above page:

table {border-collapse: collapse;}

th, td {padding: 1px 8px;}

th
{background: #CCC;
text-align: left;}

td {border-bottom: 1px solid;}

thead {display: table-header-group;}
tfoot {display: table-footer-group;}
tbody {display: table-row-group;}

After adding these styles, Table headers printed on all pages in IE7 as well as Firefox. Headers still wouldn’t print in Chrome, Safari or Opera however.

Unfortunately, it turns out this is a known bug in Webkit which Safari and Chrome use:
https://bugs.webkit.org/show_bug.cgi?id=34218

I couldn’t find an official bug report for Opera but so far it doesn’t appear there is currently a way to enable printing table headers on multiple pages.

Summary

So until Webkit and Opera add support for this feature, only Firefox and IE6+ enable printing table headers on every page out of the browsers I tested.

Advertisements
Previous Post
Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s