印刷時だけCSSで現ページ数と合計ページ数を表示させたい

やりたいこと

不特定の長さのテーブルが表示されるページに、
印刷時だけ、各ページに現ページ番号と総印刷ページ数を表示させたいです。
（プレビューで赤字の【ページ1/0】となっている部分です。）

※ブラウザの機能で表示されるページ数は使用しない前提です。

試したこと

下記のページなどを参考にしましたが、総ページ数、現ページ数がカウントされません。
https://python5.com/q/rdupjjgn
https://python5.com/q/japgjrdl

html
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <title>テスト</title>
8  </head>
9  <body>
10
11  <table>
12    <thead>
13      <tr>
14        <th colspan="7" class="pageNumber">ページ</th>
15      </tr>
16      <tr>
17        <th colspan="2">項目1</th>
18        <th>項目2</th>
19        <th>項目3</th>
20        <th>項目4</th>
21        <th>項目5</th>
22        <th>項目6</th>
23      </tr>
24    </thead>
25    <tbody>
26      <tr>
27        <th>テスト</th>
28        <td>1/5</td>
29        <td>ここに内容が<br>入ります。</td>
30        <td></td>
31        <td rowspan="2"></td>
32        <td></td>
33        <td></td>
34      </tr>
35      <tr>
36        <th>テスト</th>
37        <td>1/5</td>
38        <td>ここに内容が<br>入ります。</td>
39        <td></td>
40        <td></td>
41        <td></td>
42      </tr>
43      <tr>
44        <th>テスト</th>
45        <td>1/5</td>
46        <td>ここに内容が<br>入ります。</td>
47        <td></td>
48        <td></td>
49        <td></td>
50        <td></td>
51      </tr>
52      <tr>
53        <th>テスト</th>
54        <td>1/5</td>
55        <td>ここに内容が<br>入ります。</td>
56        <td></td>
57        <td></td>
58        <td></td>
59        <td></td>
60      </tr>
61      <tr>
62        <th>テスト</th>
63        <td>1/5</td>
64        <td>ここに内容が<br>入ります。</td>
65        <td></td>
66        <td></td>
67        <td></td>
68        <td></td>
69      </tr>
70      <tr>
71        <th>テスト</th>
72        <td>1/5</td>
73        <td>ここに内容が<br>入ります。</td>
74        <td></td>
75        <td></td>
76        <td></td>
77        <td></td>
78      </tr>
79      <tr>
80        <th>テスト</th>
81        <td>1/5</td>
82        <td>ここに内容が<br>入ります。</td>
83        <td></td>
84        <td></td>
85        <td></td>
86        <td></td>
87      </tr>
88      <tr>
89        <th>テスト</th>
90        <td>1/5</td>
91        <td>ここに内容が<br>入ります。</td>
92        <td></td>
93        <td rowspan="2"></td>
94        <td></td>
95        <td></td>
96      </tr>
97      <tr>
98        <th>テスト</th>
99        <td>1/5</td>
100        <td>ここに内容が<br>入ります。</td>
101        <td></td>
102        <td></td>
103        <td></td>
104      </tr>
105      <tr>
106        <th>テスト</th>
107        <td>1/5</td>
108        <td>ここに内容が<br>入ります。</td>
109        <td></td>
110        <td></td>
111        <td></td>
112        <td></td>
113      </tr>
114      <tr>
115        <th>テスト</th>
116        <td>1/5</td>
117        <td>ここに内容が<br>入ります。</td>
118        <td></td>
119        <td></td>
120        <td></td>
121        <td></td>
122      </tr>
123      <tr>
124        <th>テスト</th>
125        <td>1/5</td>
126        <td>ここに内容が<br>入ります。</td>
127        <td></td>
128        <td></td>
129        <td></td>
130        <td></td>
131      </tr>
132      <tr>
133        <th>テスト</th>
134        <td>1/5</td>
135        <td>ここに内容が<br>入ります。</td>
136        <td></td>
137        <td></td>
138        <td></td>
139        <td></td>
140      </tr>
141      <tr>
142        <th>テスト</th>
143        <td>1/5</td>
144        <td>ここに内容が<br>入ります。</td>
145        <td></td>
146        <td></td>
147        <td></td>
148        <td></td>
149      </tr>
150      <tr>
151        <th>テスト</th>
152        <td>1/5</td>
153        <td>ここに内容が<br>入ります。</td>
154        <td></td>
155        <td></td>
156        <td></td>
157        <td></td>
158      </tr>
159      <tr>
160        <th>テスト</th>
161        <td>1/5</td>
162        <td>ここに内容が<br>入ります。</td>
163        <td></td>
164        <td></td>
165        <td></td>
166        <td></td>
167      </tr>
168      <tr>
169        <th>テスト</th>
170        <td>1/5</td>
171        <td>ここに内容が<br>入ります。</td>
172        <td></td>
173        <td></td>
174        <td></td>
175        <td></td>
176      </tr>
177      <tr>
178        <th>テスト</th>
179        <td>1/5</td>
180        <td>ここに内容が<br>入ります。</td>
181        <td></td>
182        <td></td>
183        <td></td>
184        <td></td>
185      </tr>
186      <tr>
187        <th>テスト</th>
188        <td>1/5</td>
189        <td>ここに内容が<br>入ります。</td>
190        <td></td>
191        <td></td>
192        <td></td>
193        <td></td>
194      </tr>
195      <tr>
196        <th>テスト</th>
197        <td>1/5</td>
198        <td>ここに内容が<br>入ります。</td>
199        <td></td>
200        <td></td>
201        <td></td>
202        <td></td>
203      </tr>
204      <tr>
205        <th>テスト</th>
206        <td>1/5</td>
207        <td>ここに内容が<br>入ります。</td>
208        <td></td>
209        <td></td>
210        <td></td>
211        <td></td>
212      </tr>
213      <tr>
214        <th>テスト</th>
215        <td>1/5</td>
216        <td>ここに内容が<br>入ります。</td>
217        <td></td>
218        <td rowspan="2"></td>
219        <td></td>
220        <td></td>
221      </tr>
222      <tr>
223        <th>テスト</th>
224        <td>1/5</td>
225        <td>ここに内容が<br>入ります。</td>
226        <td></td>
227        <td></td>
228        <td></td>
229      </tr>
230      <tr>
231        <th>テスト</th>
232        <td>1/5</td>
233        <td>ここに内容が<br>入ります。</td>
234        <td></td>
235        <td></td>
236        <td></td>
237        <td></td>
238      </tr>
239      <tr>
240        <th>テスト</th>
241        <td>1/5</td>
242        <td>ここに内容が<br>入ります。</td>
243        <td></td>
244        <td></td>
245        <td></td>
246        <td></td>
247      </tr>
248      <tr>
249        <th>テスト</th>
250        <td>1/5</td>
251        <td>ここに内容が<br>入ります。</td>
252        <td></td>
253        <td rowspan="2"></td>
254        <td></td>
255        <td></td>
256      </tr>
257      <tr>
258        <th>テスト</th>
259        <td>1/5</td>
260        <td>ここに内容が<br>入ります。</td>
261        <td></td>
262        <td></td>
263        <td></td>
264      </tr>
265      <tr>
266        <th>テスト</th>
267        <td>1/5</td>
268        <td>ここに内容が<br>入ります。</td>
269        <td></td>
270        <td></td>
271        <td></td>
272        <td></td>
273      </tr>
274      <tr>
275        <th>テスト</th>
276        <td>1/5</td>
277        <td>ここに内容が<br>入ります。</td>
278        <td></td>
279        <td></td>
280        <td></td>
281        <td></td>
282      </tr>
283    </tbody>
284  </table>
285
286  </body>
287</html>

css
1  <style>
2    table {
3      border-collapse: collapse;
4    }
5    td, th {
6      border: 1px solid #595959;
7      padding: 3px;
8      width: 30px;
9      height: 25px;
10    }
11    th {
12      background: #f0e6cc;
13      min-width: 80px;
14    }
15    th.pageNumber {
16      display: none;
17    }
18    @media print {
19      body {
20        counter-reset: page;
21      }
22      .pageNumber::after {
23        counter-increment: page;
24        content: counter(page) "/" counter(pages);
25      }
26      th.pageNumber {
27        display: block;
28        border: none;
29        background: none;
30        text-align: right;
31        width: 100%;
32        color: red;
33      }
34    }
35  </style>

CSSだけで実現させたいと思っているのですが、そもそも可能なのかも分からず…
ご教示いただけませんでしょうか。
よろしくお願いいたします。

Lhankor_Mhy

2021/01/15 07:53

できないのではないかと思います。ご提示のページを拝見しました。SOの機械翻訳コピペサイトですね（最近増えてきて、ほんとウザいですね）一つ目は、コメント欄で「メジャーなブラウザでは動作しない」と、これではできないということが書いてあります。 https://stackoverflow.com/questions/34654071/print-page-count-with-total-number-of-pages-using-css 二つ目は、機械翻訳でも「CSSカウンターでカウンターの合計を取得する方法はない」となっており、読めばできないことは分かると思います。 https://stackoverflow.com/questions/49317126/css-how-to-count-total-number-of-pages

pondering

2021/01/15 08:41 編集

Lhankor_Mhy 様コメント頂きありがとうございます。 CSSカウンターでカウンターの合計を取得する方法はない >こちら自分も質問前に読んだのですが、コンテンツが動的に生成される場合は例外かもしれない…と質問させていただきました。 theadは印刷ページごとに表示されるため、その数をカウントすることで、できるかも…？なども考えましたが少なくともCSSだけでは出来なさそうですよね…。