8

I'm trying to display the table header in subsequent pages when using the browsser print functionality. Using Firefox i'm only able to display the header in the first page. The header is defined by tag. The code is the following:

<html>
<head> 
    <style type="text/css">
        @media print
        {           
            thead
            {
                display:  table-header-group;    
            }
        }
    </style>
</head>
<body>      
    <table>
        <thead>
            <tr><td>header1</td></tr>
            <tr><td>header2</td></tr>
            <tr><td>header3</td></tr>
            <tr><td>header4</td></tr>
            <tr><td>header5</td></tr>
            <tr><td>header6</td></tr>
            <tr><td>header7</td></tr>
            <tr><td>header8</td></tr>
            <tr><td>header9</td></tr>
            <tr><td>header10</td></tr>
            <tr><td>header11</td></tr>  
            <tr><td>header12</td></tr>
            <tr><td>header13</td></tr>                  
        </thead>
        <tbody>
            <tr><td>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>          
            </td></tr>
        </tbody>
    <table>

</body>

Use print preview to test my description. If you remove the following line of code 

<tr><td>header13</td></tr>

The header appear in all pages like I want to. How can a fix this? This seems a matter of max-height of the table header.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
JPP
  • 360
  • 6
  • 22

2 Answers2

2

not sure why you have too many rows on your thead. The code below works pretty well (tested on firefox). I also tested 20 table headers, still works well.

<html>
<head>
    <style type="text/css">
        @media print {
            thead
            {
                display:  table-header-group;
            }
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>header1</th>
                <th>header2</th>
                <th>header3</th>
                <th>header4</th>
                <th>header5</th>
                <th>header6</th>
                <th>header7</th>
                <th>header8</th>
                <th>header9</th>
                <th>header10</th>
                <th>header11</th>
                <th>header12</th>
                <th>header13</th>
            </tr>            
        </thead>
        <tbody>
            <tr>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
            </tr>
            <!--
                Code is too long to paste.
                If you're using emmet/zencoding, try to expand
                the code below to print 1000 rows

                (tr>(td{text})*13)*1000
            -->
        </tbody>
    <table>
</body>
Anthony
  • 589
  • 3
  • 15
0

Try using <th> instead of <td> in your table header for cells. The browser should automatically print those headers on every page. Also, make sure the number of cells in each <tbody> row equals the number of cells in the header.

julesj
  • 754
  • 4
  • 10
  • i try what you said but unfortntly doesn't work. Please try my example to see that is not working and then remove the "header 13" line. Then the behaviour is the expected. I guess that is matter of max-height of the thead tag – JPP Feb 07 '11 at 18:59