Menu
I'm trying to display the table header in subsequent pages when using the browsser print functionality. Using Firefox i'm only able to display the header in the first page. The header is defined by tag. The code is the following:
<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 test my description. If you remove the following line of code
<tr><td>header13</td></tr>
The header appear in all pages like I want to. How can a fix this? This seems a matter of max-height of the table header.
958
not sure why you have too many rows on your thead. The code below works pretty well (tested on firefox). I also tested 20 table headers, still works 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
