web-dev-qa-db-ja.com

テーブルの行内で改ページを避ける

WkhtmltopdfでhtmlをPDFに変換するとき、htmlのテーブルの行内で改ページを避けたい。私はpage-break-inside：atableを使用して動作しますが、行数が非常に多いため動作しません。 trをブロックまたは他の何かとして表示するように設定すると、テーブルのフォーマットが変更されますになり、二重罫線が挿入されます。または、テーブルが分割された各ページにテーブルヘッダーを挿入することもできます。

htmlcsswkhtmltopdf
85
Ankit Mittal

CSSでこれを試すことができます：

<table class="print-friendly">
 <!-- The rest of your table here -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

ほとんどのCSSルールは<tr>タグに直接適用されません。まさにあなたが上で指摘したもののためです-それらはこれらのCSSルールを許可しないユニークなdisplayスタイルを持っています。ただし、通常、その中の<td>および<th>タグdoは、この種の指定を許可します。このようなルールを簡単に適用できます上記のCSSを使用して、すべての子-<tr>と<td>に.

67
Troy Alford

Webkitブラウザーでこの問題に対処するために見つけた最良の方法は、各td要素内にdivを配置し、page-break-insideを適用することです。次のようにdivのスタイルを回避します。

...
<td>
  <div class="avoid">
    Cell content.
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }
</style>

Chromeはおそらく 'page-break-inside：avoid;'を認識しませんがプロパティを使用すると、wktohtmlを使用してPDFを生成するときに、改ページによって行コンテンツが半分に分割されるのを防ぐことができます。 tr要素は改ページに少しぶら下がることがありますが、divおよびその中の要素は改ページしません。

30
Aaron Hill

上記の@AaronHillによる4pxトリック（ link ）を使用しましたが、本当にうまくいきました！テーブル内の各<td>にクラスを追加する必要なく、よりシンプルなcssルールを使用しました。

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}
16
phidias

少なくとも私にとっては、この問題を解決する新しい方法を見つけました（MacOS SierraのChromeバージョン63.0.3239.84（公式ビルド）（64ビット））

親テーブルにCSSルールを追加します。

table{
    border-collapse:collapse;
}

およびtdの場合：

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

Stack Overflowでこのソリューションを実際に見つけましたが、最初のGoogle検索では表示されませんでした： CSSでテーブル行内の改ページを停止

問題を解決してくれた@ Ibrennan208に称賛を！

9
Jason Silver

アーロンヒルの答えに基づいて、次のJavaScriptを作成しました。

//Add a div to each table cell so these don't break across pages when printed
//See http://stackoverflow.com/a/17982110/201648
$(document).ready(function () {
    var ctlTd = $('.dontSplit td');
    if (ctlTd.length > 0)
    {
        //console.log('Found ctlTd');
        ctlTd.wrapInner('<div class="avoidBreak" />');
    }
});

dontSplitは、tdをページ間で分割したくないテーブルのクラスです。これを次のCSSで使用します（再び、Aaron Hillに起因）。

 .avoidBreak {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }

これは、最新バージョンのChromeでうまく機能しているようです。

8
Aaron Newton

CSS page-break-insideを使用しても機能しません（これはWebkitブラウザーの問題です）。

Wxhtmltopdf JavaScriptテーブル分割ハックがあり、指定したページサイズに応じて（x行の静的な値の後に改ページするのではなく）長いテーブルを小さなテーブルに自動的に分割します： https：//Gist.github。 com/368351

7
Richard Pursehouse

私が動作することがわかった唯一の方法は、各TR要素を独自のTBODY要素内に配置し、CSSを介してTBODY要素に改ページルールを適用することでした

7
Troy Morehouse

で試す

white-space: nowrap;

改行しないようにtdにスタイルを設定します。

3
vinayakshukre