2

I have a long table with hundreds of rows. To print the table headers on each page, I am using THEAD {display: table-header-group} to style the table. And it works as expected in Firefox and IE9. But when I try to force the page breaks as shown in below code, it doesn't work in IE9. With IE9, the table headers get printed only the pages where the table breaks naturally.

Here is the code snippet -

CSS: 
@media print {
    thead { display: table-header-group; }
}

HTML/PHP:
    <table>
      <thead>
        <tr>
           <th>Header 1</th>
               <th>Header 2</th>
               <th>Header 3</th>        
           </tr>
      </thead>
      <tbody>
           <?php 
           foreach ($items as $item) {
               echo  " <tr> " ;
                  echo  "<td>text</td>" ;
                  echo  "<td>text</td>" ;
                  echo  "<td>text</td>" ;

                  if ($condition) {
                      echo  "</tr>" ;

                      echo  "<tr style='page-break-after:always;'>" ;
                      echo  "</tr>" ;
                  }
           }
           ?>
       </tbody>
    </table>

Will greatly appreciate any help on this.

Thanks.

imhere
  • 4,405
  • 7
  • 26
  • 25
  • brackets not required for echo, you can remove them :) –  Mar 21 '13 at 16:22
  • 2
    I quote from another post `Setting float:none on all parent elements makes page-break-before:always work correctly.` if this helps. As per > http://stackoverflow.com/questions/4884380/css-page-break-not-working-in-all-browsers – Funk Forty Niner Mar 21 '13 at 16:36
  • Thanks a ton!! I added page-break-before instead of page-break-after and set the float to none on each parent element and it worked like a charm! Thanks again. – imhere Mar 22 '13 at 15:08

1 Answers1

2

Begin with using correct HTML with closing tags

if ($condition) {
   echo ( "</tr>" );
   echo ( "<tr style='page-break-after:always;'>" );
   echo ( "</tr>" );
} else {
   echo ( "</tr>" );
}

If that doesn't help try

if ($condition) {
   echo ( "</tr>" );
   echo ( "<tr style='page-break-after:always;'>" );
   echo ( "</tr> " );
   echo ( ' <tr class="class_only_visible_when_printed"> ' );
   echo ( "  <th>Header 1</th> " );
   echo ( "  <th>Header 2</th> " );
   echo ( "  <th>Header 3</th> " );        
   echo ( " </tr> " );
} else {
   echo ( "</tr>" );
} 
  • Thanks! I have tried the second solution you have suggested but IE still prints the headers where the page breaks naturally. – imhere Mar 21 '13 at 16:50