Google Chromeの印刷でページ番号を表示させたい

Question

前提・実現したいこと

現在、phpでwebシステムを作成しています。
その中の1ページをGoogle Chromeの印刷を使用して、出力させたいと思っています。
印刷にはjquery内で作成した内容で、印刷用のcssも作成しています。
印刷はtableでtheadとtfootを印刷のヘッダーフッターにしようと考えて作成しました。

各ページの下部にページ数を印字したいと考えています。

発生している問題・エラーメッセージ

ページ数が印字されません。

試したこと

以下をcssに追記しても表示されませんでした。
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}

tfootにclass='sheet'のセクションを記載し、下記を追加しても1ページ目にしか表示されませんでした。
.sheet::after {
position: absolute;
bottom: 0;
right: 0;
counter-increment: sheet;
content: "ページ " counter(sheet);
}

補足情報

ブラウザの印刷機能から行えれば、
手段はcssでもjqueryでも問わないので
印刷時にページ番号を表示させる方法を
ご教示いただければと思います。

Comments

[x_x]

tfoot ではなく、div 等ではどうなりますか？

[katashin]

ご連絡ありがとうございます。
追加情報として書かせていただきます。
<table>
<thead>
複数ページ共通印字
</thead>
<tbody>
<tr>
<th>AAA</th>
<td>aaa</td>
</tr>
<tr>
<th>BBB</th>
<td>bbbbbbbb</td>
</tr>
</tbody>
<tfoot>
複数ページ共通印字
</tfoot>
</table>

以上のような形で、tbodyのtd(今回bbbbbbbb)
の量が多いと複数のページになります。
divは<table>を囲む形で追記すれば良いでしょうか？
これからいろいろ試してみますが、
教えていただけると幸いです。

Answer 1

関連しているところをあげてほしいところですが、とりあえずカウンターは counter-reset で初期化する必要があります。

:root {
  counter-reset: sheet;
}

https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters
https://developer.mozilla.org/ja/docs/Web/CSS/counter-reset