htmlをwkhtmltopdfでPDFに変換するときに、htmlのテーブルの行内の改ページを回避したいと思います。私はpage-break-inside：avoid with table-を使用していますが、行が多すぎて機能しません。trの表示をブロックまたはその他のものとして設定すると、テーブルのフォーマットが変更され、二重の境界線が挿入されます。または、テーブルが分割された各ページにテーブルヘッダーを挿入することもできます。

あなたは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>

<tr>上記で正確に指摘したとおり、ほとんどのCSSルールはタグに直接適用されdisplayません。これらのルールには、これらのCSSルールを許可しない独自のスタイルがあります。ただし、通常、その内部のタグ<td>と<th>タグはこの種の指定を許可します。また、上記のようにCSSを使用して<tr>、すべての子とにそのようなルールを簡単に適用できます<td>。

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は「改ページの内側：回避」を認識していないと思われます。プロパティ、これはwktohtmlを使用してPDFを生成するときに、改ページによって行のコンテンツが半分に分割されないように思われます。tr要素はページの上にぶら下がる可能性がありますが、divとその中の何かはそうしません。

上記の@AaronHillによる4pxトリックを使用しました（リンク）。<td>テーブルのそれぞれにクラスを追加する必要なしに、シンプルなcssルールを使用しました。

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

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

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

table{
    border-collapse:collapse;
}

そしてtdの場合：

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

私は実際にこのソリューションをスタックオーバーフローで見つけましたが、最初のGoogle検索では表示されませんでした： テーブル行内の改ページを停止するCSS

問題を解決するための@ Ibrennan208への称賛！

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

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

アーロン・ヒルの答えに基づいて、次の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でうまく機能しているようです。

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

で試す

white-space: nowrap; 

新しい行で改行しないようにtdのスタイル。

私はそれを発見したpage-break-inside: avoidテーブルの親要素のいずれかがいない作業しているかどうdisplay: inline-blockかflex。すべての親要素がであることを確認してくださいdisplay: block。

またオーバーライドを検討しtable、tr、tdのdisplayCSSでスタイルをgrid印刷レイアウトのためにあなたがテーブルで問題が発生し続ける場合。

2020ソリューション

すべてのブラウザで一貫して作業できる唯一のことは、各行を独自のテーブル要素内に配置することです。これはノードHTML-PDFでも機能します。次に、すべてをに設定しますpage-break-inside: avoid。

table,
tr,
td,
div {
    page-break-inside: avoid;
}

これの唯一の欠点は、列の幅を手動で設定する必要があることです。そうしないと、奇妙に見えます。次は、2つの列でうまく機能しました。

td:first-child { width: 30% }
td:last-child { width: 70% }