これは既知の問題です。page-breakプロパティは、ブロック レベルの要素にのみ適用されます。
これが、で改ページが発生しない理由ですtbody。明示的にtbodyから に変更display: table-row-groupするとdisplay: block、改ページが適用され始めます。ただし、これによりテーブルのレイアウトが崩れます。
仕様によると: http://www.w3.org/TR/CSS21/page.html#page-break-props
ユーザー エージェントは、ルート要素の通常のフローでこれらのプロパティをブロック レベルの要素に適用する必要があります。ユーザー エージェントは、これらのプロパティを他の要素、たとえば「table-row」要素に適用することもできます。
仕様では、ユーザー エージェントもこれらのプロパティを に適用できると書かれていますが、「可能性がありtable-rowます」という言葉がその役割を果たし、動作は実装全体で均一ではありません。
解決：
tbody改ページを に直接適用するのではなく、 のブロック レベルの疑似要素に適用しtbodyます。
このような：
tbody::after {
content: ''; display: block;
page-break-after: always;
page-break-inside: avoid;
page-break-before: avoid;
}
これがあなたの作業フィドルです：http://jsfiddle.net/abhitalks/DTcHh/3054/
また、これだけですべての問題が解決するわけではないことに注意してください。ユースケースに合わせて、ページ コンテキストと適切な余白と寸法を慎重に定義する必要があります。
これで開始できます：
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
...
}
これを試すための非常に簡単な例のスニペットを次に示します。テストするには、印刷プレビューを確認します。それぞれの後に 1 つずつ、2 つの改ページがあるはずtbodyです。
スニペット:
table, th, td { border: 1px solid gray; border-collapse: collapse; }
th, td { padding: 8px; }
tbody:first-of-type { background-color: #eee; }
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
tbody::after {
content: ''; display: block;
page-break-after: always;
page-break-inside: avoid;
page-break-before: avoid;
}
}
<div>
<a href="#" onClick="window.print();">Print</a>
</div>
<hr />
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
<td>Row 4 Cell 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Foot 1</th>
<th>Foot 2</th>
<th>Foot 3</th>
</tr>
</tfoot>
</table>
免責事項: Chrome v39 に対してのみテストしました。独自のテストを適用する必要があります。
.
