6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

htmlのtable内で改ページさせるのに迷った話

Posted at

初投稿。主に自分のメモ用に。

初めまして。omochisanと申します。
主婦パートとしてプログラマをしております。プログラミング経験も数年の若輩モノです。
最近javascriptを始めて、現在勉強中…。主に自分が忘れないための防波堤としてこちらに投稿させていただきますが、もしも誰かの何かのお役に立てれば幸いです。
そして特に、「こうすればええやん」というご意見など、超ありがたいのでぜひお願い致します!

tableタグ内で改ページさせる

ご挨拶はほどほどに、本題です('_';)
tableが含まれているWEBページを印刷する際、行数が多く印刷数が何ページにも渡る時がありました。
それはいいのですが、レイアウトの都合上、一定の行数で改ページをさせたい…。
ということでtableタグ内で改ページ設定を行うことにしました。

webTable.js
if (telements.length >= 10) {
  for (let i = 1; i < telements.length; i++) {
   if (i % 9 === 0) {
    telements[i].className = "pagebreak";
   }
  }
}
table.css
@media print {
  tr[class="pagebreak"]  {
    page-break-after: always;
  }
}

上記はページ印刷時、10行ごとに改ページを行うよう指定しています。
最初は改ページしたい部分のtrタグ内にtdタグと並列でdivを追加して、追加したdivへpage-break-after: always(改ページ指定)を設定したのですが、うんともすんとも改ページされず。。。
なのでtrブロック自体に改ページ指定を行いました。

tableタグ内で改ページ処理ってこんな感じであってるの…かな…?(--;)
今回は以上です!

6
8
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?