質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
印刷

印刷とは、インキを用いて紙などの被印刷物に機械的に複製することを指します。現在は紙などの2次元の媒体だけでなく、3次元の曲面にも直接印刷する技術など様々な開発が進んでいます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

2723閲覧

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

pondering

総合スコア104

印刷

印刷とは、インキを用いて紙などの被印刷物に機械的に複製することを指します。現在は紙などの2次元の媒体だけでなく、3次元の曲面にも直接印刷する技術など様々な開発が進んでいます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/15 06:58

やりたいこと

不特定の長さのテーブルが表示されるページに、
印刷時だけ、各ページに現ページ番号と総印刷ページ数を表示させたいです。
(プレビューで赤字の【ページ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だけで実現させたいと思っているのですが、そもそも可能なのかも分からず…
ご教示いただけませんでしょうか。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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だけでは出来なさそうですよね…。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問