Skip to content Skip to sidebar Skip to footer

Table Heading Repeat While Printing

I have used table for display the list of records. It have lot of rows and columns. If I print this table the table heading display in first page. After the first page the headings

Solution 1:

Try adding this in your CSS :

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

Solution 2:

Here is the sample First, you have to explicitly define the table head and table body:

   <table>
   <thead>
  <tr>
     <th>First Heading</th>
     <th>Second Heading</th>
     <th>Third Heading</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>foo</td>
     <td>bar</td>
     <td>baz</td>
  </tr>

    . . .

  <tr>
     <td>fim</td>
     <td>fam</td>
     <td>fom</td>
  </tr>
</tbody>
</table>

If you want printing to work, you need to have an explicit declaration. Next, you just need a single line of CSS to get things going:

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

This will force most browsers to repeat the contents of thead node on every printed page.

Post a Comment for "Table Heading Repeat While Printing"