Cómo imprimir table que abarca varias páginas en una página web en todas las páginas con un encabezado fijo como en Excel.

HTML

Encierre la sección del encabezado que desea fijar en la impresión con tag de <thead></thead> .

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>

CSS

Lo que sigue está escrito en CSS.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@media print {
thead {display: table-header-group;}
}
@media print { thead {display: table-header-group;} }
@media print {
   thead {display: table-header-group;}
}

Referencia

http://www.terminally-incoherent.com/blog/2009/10/12/repeating-html-table-headers-on-each-printed-page/

関連記事: