js表格打印自动分页demo

57次阅读

共计 2209 个字符,预计需要花费 6 分钟才能阅读完成。

两个必须要有一个。
每页都需要表头就将内容放在这个中:<thead style=”display: table-header-group; font-weight: bold”></thead>
每页都需要表尾: <tfoot style=”display: table-footer-group; font-weight: bold”></tfoot>
用代码说话:

<!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=”1″ style=”font-size: 9pt;” width=”300px” align=”center”>
<thead style=”display: table-header-group; font-weight: bold”>
<tr>
<td align=”center” style=”font-weight: bold; border: 3px double red”> 表头 </td>
<td align=”center” style=”font-weight: bold; border: 3px double red”> 表头 2 </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>
<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>
<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>
<td> 表格内容 3 </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>
<td> 表格内容 3 </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>
<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>

正文完
 0