When a HTML table spans on multiple pages in the generated PDF document it is possible to repeat the table header and footer on each PDF page where the table is rendered. This effect can be achieved if you set the display:table-header-group style on the thead tag inside the table or if you set the display:table-footer-group style on the tfoot tag inside the table. Below you can see a complete HTML example for this feature.
HTML Table with Header Repeated on Each PDF Page
 Copy | |
|---|---|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML to PDF Converter - Repeat Table Head on Each PDF Page</title> <style type='text/css'> thead { display: table-header-group; } .style1 { width: 62px; } .style2 { width: 88px; } </style> </head> <body style=""> <table style="border: 1px solid #000000; padding: 1px; margin: 1px; width: 950px; font-family: Verdana; font-size: 12px;" border="1px"> <thead style="display: table-header-group; background-color: #eeeeee"> <tr> <th class="style2" style="text-align: center"> <img height="48px" src="img/usericon.jpg" /><br /> Employee ID </th> <th> National ID Number </th> <th> Contact ID </th> <th> Manager ID </th> <th class="style1"> Employee Function </th> <th> <img height="48px" src="img/calendar.jpg" /><br /> Birth Date </th> <th> <img height="48px" src="img/clock.jpg" /><br /> Hire Date </th> <th> Vacation Hours </th> <th> Sick Leave Hours </th> <th> Modified Date </th> <th style="background-color: #cecece"> Marital Status </th> <th style="background-color: #cecece"> Gender </th> <th style="background-color: #cecece"> Salaried Flag </th> </tr> </thead> <tbody> <tr> <td class="style2" style="text-align: center"> 1 </td> <td> 14417807 </td> <td> 1209 </td> <td> 16 </td> <td class="style1"> Production Technician - WC60 </td> <td> 5/15/1972 </td> <td> 7/31/1996 </td> <td> 21 </td> <td> 30 </td> <td> 7/31/2004 </td> <td style="text-align: center"> M </td> <td style="text-align: center"> M </td> <td style="text-align: center"> 0 </td> </tr> <tr> <td class="style2" style="text-align: center"> 2 </td> <td> 253022876 </td> <td> 1030 </td> <td> 6 </td> <td class="style1"> Marketing Assistant </td> <td> 6/3/1977 </td> <td> 2/26/1997 </td> <td> 42 </td> <td> 41 </td> <td> 7/31/2004 </td> <td style="text-align: center"> S </td> <td style="text-align: center"> M </td> <td style="text-align: center"> 0 </td> </tr> <tr> <td class="style2" style="text-align: center"> 3 </td> <td> 509647174 </td> <td> 1002 </td> <td> 12 </td> <td class="style1"> Engineering Manager </td> <td> 12/13/1964 </td> <td> 12/12/1997 </td> <td> 2 </td> <td> 21 </td> <td> 7/31/2004 </td> <td style="text-align: center"> M </td> <td style="text-align: center"> M </td> <td style="text-align: center"> -1 </td> </tr> <tr> <td class="style2" style="text-align: center"> 4 </td> <td> 112457891 </td> <td> 1290 </td> <td> 3 </td> <td class="style1"> Senior Tool Designer </td> <td> 1/23/1965 </td> <td> 1/5/1998 </td> <td> 48 </td> <td> 80 </td> <td> 7/31/2004 </td> <td style="text-align: center"> S </td> <td style="text-align: center"> M </td> <td style="text-align: center"> 0 </td> </tr> <tr> <td class="style2" style="text-align: center"> 5 </td> <td> 480168528 </td> <td> 1009 </td> <td> 263 </td> <td class="style1"> Tool Designer </td> <td> 8/29/1949 </td> <td> 1/11/1998 </td> <td> 9 </td> <td> 24 </td> <td> 7/31/2004 </td> <td style="text-align: center"> M </td> <td style="text-align: center"> M </td> <td style="text-align: center"> 0 </td> </tr> </tbody> </table> </body> </html> | |
