Header & Footer In Print Page? Not The Web browser Header And Footer
I Have Problem with Headers And Footer on web page Which is Going to Print. My custom headers and footer should print on each page. Header is printing at top of page, that is fine, but footer is not printing at bottom of page if the content is less on page. footer is printing depends on content.
HERE MY CODE IS:-
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<link rel='stylesheet' type='text/css' href='print.css' media='print'>
<title></title>
</head>
<body>
<table border="0" align="center" width="100%">
<thead开发者_C百科>
<tr>
<th align="center" width="100%">
<font size="5" color="black"><strong>HEADER HERE</strong></font>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td align="center" width="100%">
<font size="4" color="black"><strong>FOOTER HERE</strong></font>
</td>
</tr>
</tfoot>
<tbody height="100%">
<tr>
<td width="100%">
CONTENT HERE
</td>
</tr>
</tbody>
</table>
</body>
</html>
MY CSS IS:-
.thead {
display: table-header-group;
}
.tfoot {
display: table-footer-group;
}
Can any one suggest me how to do it ? that would great help?
Since you have a print.css, write (only in print.css):
thead {
display: block;
position: fixed;
top: 0;
}
tfoot {
display: block;
position: fixed;
bottom: 0;
}
Depending on how much height your thead and tfoot might occupy, use an appropriate margin-top and margin-bottom on the table to avoid any overlap that might occur.
This is the code i use. Note I am setting both html and body height to 100% (needed for Chrome and Safari). Tested and works fine in IE9, FF, Chrome.
@media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
加载中,请稍侯......
精彩评论