html - 打印时在 HTML 中打印页码

Question

我正在尝试打印帐单类型 HTML 页面。由于法案的篇幅，可能会有多页。以下是 HTML 页面的结构

<table>
  <thead>
    <tr><td>
      <div class="header">...</div>
    </td></tr>
  </thead>
  <tbody>
    <tr><td>
      <div class="content">...</div>
    </td></tr>
  </tbody>
  <tfoot>
    <tr><td>
      <div class="footer">...</div>
    </td></tr>
  </tfoot>
</table>

<thead>和 <tfoot>将在每个页面上可用。我需要的是打印时在每一页上打印页码。当我使用 counter-increment它总是显示No 1

Answer 1

试试 counter-increment: page; content: counter(page);。

.footer {
  display: table-footer-group;
}

.footer:after {
  counter-increment: page;
  content: counter(page);
}

<table>
  <thead>
    <tr>
      <td>
        <div class="header">...</div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="content">...</div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <div class="footer">...</div>
      </td>
    </tr>
  </tfoot>
</table>