打印时在 HTML <tfoot> 中打印页码

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>

Answer 2

对我来说，如果我在递增之前将计数器置零，它会起作用，否则计数器总是显示数字 1。

body {
    /* Set "my-sec-counter" to 0 */
    counter-reset: my-sec-counter;
}

.footer::after {
    /* Increment "my-sec-counter" by 1 */
    counter-increment: my-sec-counter;
    content: "Counter " counter(my-sec-counter) ". ";
}