Geek Answers Handbook

Printing the table heading on the following pages

I am trying to display the table title on subsequent pages when using the print function of browsers. Using Firefox, I can only display the title on the first page. The title is determined by the tag. The code is as follows:

<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 check my description. If you delete the following line of code

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

The title is displayed on all pages as I want. How to fix it? This is similar to the maximum table header height.

+8
html css printing
source share
2 answers

Not sure why you have too many lines on thead . The code below works very well (tested on firefox). I also tested 20 table headers, still working 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>
+2
source share

Try using <th> instead of <td> in the table header for cells. The browser should automatically print these headers on each page. Also, make sure the number of cells in each <tbody> is equal to the number of cells in the header.

0
source share

More articles:


All Articles