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

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

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

初めまして。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タグ内で改ページ処理ってこんな感じであってるの…かな…？(--;)

今回は以上です！