html - 使用自动分页符打印 html 时添加页码

Question

我想打印一个带有每页页码的 HTML 页面。我的 HTML 由一个包含不同大小行的表格组成。所以我不知道什么时候会发生分页。我只是使用了“page-break-inside：避免；” 在行中，因为我不想在行内中断。

我尝试使用 @page 属性，但它不起作用。

    @page {
        size: A4 portrait;
        margin: 11mm 17mm 17mm 17mm;
        counter-increment: page;

        @bottom-left {
            content: counter(page);
        }
    }

    @page:first {
        counter-reset: page 1;
    }

我尝试在页脚或页眉之后使用，但也不起作用。标题似乎打印在每一页上，但只计算一次。所以我不能用它作为反增量。始终保持为第 1 页。页脚也是如此。

我的问题是在哪里放置反增量。我没有特定的元素来控制分页符。

HTML：

    <table>
    <thead>
        <tr>
            <td>
                <div class="header-space">
                    <%-- header code --%>
                </div>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="content">
                    <div class="content-block">
                        <p>
                            <asp:Repeater ID="rptTeste" runat="server" OnItemDataBound="rptTeste_ItemDataBound">
                                <ItemTemplate>
                                    <div id="divQuestao">
                                        <%-- rows of variate sizes code --%>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </p>
                    </div>

                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <div class="footer-space">
                    <%-- footer code --%>
                </div>
            </td>
        </tr>
    </tfoot>
    </table>

CSS：

    @media print {
    @page {
        size: A4 portrait;
        margin: 11mm 17mm 17mm 17mm;
    }


    body {
        float: none;
        margin-left: 0;
        margin-top: 0;
        counter-reset: page;
    }

    .header-space,
    .footer-space {
        height: 150px;
    }

    .footer-space::after { 
        top: 0px; position: relative;
        white-space: nowrap; 
        z-index: 20; width:100%;  margin:0 auto; text-align:center;
        counter-increment: page;
        content:"Page " counter(page);
    }       

    #divQuestao {
        page-break-inside: avoid;
        padding-top: 30px;
        text-align: justify;
    }
    }

打印时显示页码应该是那么容易！但不是！！

标签： htmlcss