6
連続する行が概念的に関連しており、一緒に存在する必要があるデータの<table>があります。 <tbody>タグの各行のペアをグループ化しました。テーブルを印刷する時が来たら、ページ区切りが<tbody>タグ間でのみ起こるようにしたいと思います。Chromeから印刷するときのtbody間のページ区切り
は、私がpage-break-inside: avoidとpage-break-after: autoのいくつかのバリエーションを試してみたが、それはクロム42で仕事を得るように見えることはできません
しかし、ように動作するようですん（下のスクリーンショットを参照してください） Firefox 40とIE 11で期待されている。 page-break-*はブロックレベルの要素にのみ適用されるようです。これはhtml/cssでこれを達成する良い方法はありますか？
例コード：
<!doctype html>
<html>
<head>
<style>
table {
width: 70%;
border-collapse: collapse;
}
thead {
display: table-header-group;
text-align: left;
border-bottom: 2px solid #000;
}
tbody {
page-break-inside: avoid;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Project #</th>
<th>Owner</th>
<th>% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td>HR-123</td>
<td>Arther Dent</td>
<td>42%</td>
</tr>
<tr>
<td colspan='3'>Description: Find travel guide to get me back to earth.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>RD-123</td>
<td>Frodo Baggins</td>
<td>9%</td>
</tr>
<tr>
<td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
</tr>
</tbody>
<!-- repeat tbody sections as necessary to get onto the second page -->
</table>
</body>
</html>
はここであなたに私が達成しようとしているかのアイデアのビットを与えるでしょうJSFiddleです。
編集：私はテーブルを使用していない考慮が、（ⅰ）私は私の列が並んしたくなかったので、および（ii）私は本当に彼らを確認するためにハードコードの列幅にしたくありませんすべて同じです。
*ブロック要素（http://learnlayout.com/inline-block.html） 具体的には、ページ・ブレイクを使用することを確認 でそれをすべてを包む試してみてくださいテーブルは少し複雑なのでインラインブロックとスパンを表示します。 – Hydro
ヒント：表内のページ区切りプロパティ、フローティング要素、および境界線を持つブロック要素を避けてください。 – Andrew