使用自动分页符打印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;
    }

我尝试在页脚或页眉之后使用，但也不起作用。 Thead似乎在每页上打印，但只计数一次。因此，我不能将其用作反增量。始终保持与第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;
    }
    }

假设打印时如此容易显示页码！但这不是！