本文转自:http://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html
在做项目的时候碰到的。用户要求,页面呈现太长时,打印的时候,要求,每页上都要有表头。找了好久,才在网上找到。原来,是要对每个表格,定义其thead,并对其样式设置成:style="display:table-header-group"。如果要求有表尾,也一样,要定义其tfoot,并对style="display:table-footer-group"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
@media print {
INPUT {
display: none;
}
}
</style>
</head>
<body>
<table border="0" style="font-size: 9pt;" width="300px" align="center">
<thead style="display: table-header-group; font-weight: bold">
<tr>
<td colspan="2" align="center" style="font-weight: bold; border: 3px double red">每页都有的表头</td>
</tr>
</thead>
<tbody style="text-align: center">
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr style="page-break-after: always;">
<td>表格内容1</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr style="page-break-after: always;">
<td>表格内容2</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr style="page-break-after: always;">
<td>表格内容3</td>
<td>表格内容</td>
</tr>
</tbody>
<tfoot style="display: table-footer-group; font-weight: bold">
<tr>
<td colspan="2" align="center" style="font-weight: bold; border: 3px double blue">每页都有的表尾</td>
</tr>
</tfoot>
</table>
<input type="button" value=" 打 印 " onclick="javascript: window.print();">
</body>
</html>