8

IE9、Firefox、Opera ではこの問題は発生しません。Chrome と Safari だけです。

ページを印刷するときに、次のページに進むためにある時点で分割する必要がある表がある場合、Safari と Chrome は行を半分にカットし、最初のページに上半分を、2 番目のページに下半分を印刷します。ページ。

これは、IE9で発生した問題を修正した使用しようとしていたコードです-次のページのすべての行に小さな50px x 50pxの画像を最初のページのテキストとともに印刷します。

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }

平均して約10〜15行のさまざまな量の行を持つ7つのページがあります。この問題を解決するにはどうすればよいですか?

また、PHPforeachを使用して配列からテーブルを作成するので、そのコードを編集する必要がなく、ページ間で一貫性を保つことができます。

4

2 に答える 2

2

行間の改ページのみを許可するテーブルの例を次に示します。Webkit ベースのものを含む、一般的なデスクトップ ブラウザーのいずれかで動作するはずです...

<style>
  table {
    border-spacing: 0;
    line-height: 1.25em;
  }
  table > tbody > tr > td {padding: 0;}
  table > tbody > tr:first-child > td > div {border-top: 2px solid black;}
  table > tbody > tr > td:first-child > div {border-left: 2px solid black;}
  table > tbody > tr > td > div {
    page-break-inside: avoid;
    display: inline-block;
    vertical-align: top;
    height: 3.75em;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
  }
</style>

<table>
  <tr>
    <td><div>Content</div></td>
    <td><div>Multi-<br/>line<br/>content</div></td>
  </tr>
  <tr>
    <td><div>Content</div></td>
    <td><div>Multi-<br/>line<br/>content</div></td>
  </tr>
</table>

残念ながら、セルのコンテンツの高さを固定する必要があるため、この投稿に出くわしたほとんどの人にとっておそらく役に立たないでしょう.

コンテンツの高さを固定せずにこれを実行することは可能ですが、驚くほど複雑です。この投稿の私の回答をチェックして、それがどのように行われたかを確認してください。

于 2014-09-10T04:25:40.173 に答える