js表格打印自动分页demo

两个必须要有一个。

每页都需要表头就将内容放在这个中：
<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>

js表格打印自动分页demo

木木先生

引用和评论

一个页面进去自动跳到指定的页面去

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具