I am trying to print a HTML page which is styled using table , thead , tbody ,tfoot. This layout was choosen as we need the header and footer on every printed page output. The content of the body is dynamic.
The problem is that when the content of the tbody fits a single A4 , the print output is clean and coming on a single page as expected with header on top , followed by body and footer at bottom. When the content of the body is long, the print output is giving only header and footer on the first page. The output from the second page onwards is as expected : header + body content + footer.
I tried using combinations of @media print with page-break-before , page-break-after , page-break-inside values set to auto / avoid . But no luck .
<body>
<div>
<table>
<thead>
<tr>
<th><header >
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2">
</div>
<div class="col-md-4 ">
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
</div>
<hr>
</header></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> some dynamic content will come here </div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><footer class="printFooter">
</footer></td>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
printHeaderForPrint();
});
</script>
<script type="text/javascript" src="js/somejavascript.js"></script>
</body>
Aucun commentaire:
Enregistrer un commentaire