印刷時のHtmlテーブルの破損行

Question

現在、印刷しようとしているテーブルに問題があります。複数のページがある場合は、ページ区切りのテーブル行が切り取られています。私はすでにtable { page-break-inside:auto }とtr { page-break-inside:avoid; page-break-after:auto }を使ってみましたが、どちらもうまくいきませんでした。

これは私のCSSと矛盾しているかもしれませんか？ここで

はそれでJsfiddleです：Jsfiddle link

Answer 1

この

@media print { 

    table.report { page-break-after:auto } 
    table.report tr { page-break-inside:avoid; page-break-after:auto } 
    table.report td { page-break-inside:avoid; page-break-after:auto } 
    table.report thead { display:table-header-group } 
    table.report tfoot { display:table-footer-group } 
} 

にあなたのCSSを変更しても

<tbody>...</tbody> 

すべての余分を削除

、あなただけの1

<tbody></tbody> 

を持つべきです

とその間のすべてのtr。

これはうまくいくはずです。

ref：https://www.w3.org/TR/css-print/